Reduce Gaps between images

  • neelo

    (@neelo)


    9 years, 8 months ago

    Hello,

    I’ve installed the WP Instagram Widget, I’d like the Instagram feed to show up on the website with no spaces between the images, at the moment I have spaces and a grey dot between images.

    I’d like the feed to look like a tight grid and I would like to extend the margins of the widget to fill the entire widget space.

    Could you please suggest some CSS code that would work. I have already inserted the below code to have the images appear horizontally:

    .instagram-pics li {
    float: left;
    }
    .instagram-pics li:before {
    content: ”;
    padding: 0;
    }

    Website: http://daychaser.co.za

    Thanks,
    Neelo

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Scott (@scottsweb)

    (@scottsweb)

    9 years, 8 months ago

    Try:

    
.instagram-pics {
    list-style: none;
    margin: 0;
}

.instagram-pics li {
    margin: 0;
    float: left;
    padding: 0;
    width: 25%;
}

.instagram-pics img {
    display: block;
}

    and take the width off the images:

    
.instagram-pics img {
    /** width: 200px; **/
}
    Thread Starter neelo

    (@neelo)

    9 years, 8 months ago

    Hi Scott,

    Thanks for the reply, I added it in and removed the width off the images. It didn’t work.(but it does look different)
    I have a feeling there might be another margin restricting the images from filling the entire space up.

    If you have any other suggestions I would appreciate it.

    I have contacted the Theme Developers to see if it something on their side.

    Thanks
    Neelo

    Plugin Author Scott (@scottsweb)

    (@scottsweb)

    9 years, 8 months ago

    Your CSS is not cascading very well. If you use your browsers inspector you can see the clash. Easiest fix is to add !important to a few declarations:

    
.instagram-pics li {
    margin: 0 !important;
    float: left;
    padding: 0 !important;
    width: 25%;
}
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Reduce Gaps between images’ is closed to new replies.