Overriding Theme/SI CSS

  • Resolved andyatbitdog

    (@andyatbitdog)


    12 years, 2 months ago

    Hi,

    I’ve been looking at other questions that have been asked – but haven’t been able to solve the problem yet. I’m try to get the [si_feed] to fill the width of the area it has been placed in. I’ve tried adding:

    .si_feed_widget .si_item{
    width:100%;
    float:none;
    margin: 0 auto;
}

    to the CSS for my theme but it’s not having any effect – what I’m after is for the grid of images to add space between the images so that it fills 100% of the horizontal space. The page it’s on is here.

    Is that possible?

    Thanks!

    https://wordpress.org/plugins/simple-instagram/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter andyatbitdog

    (@andyatbitdog)

    12 years, 2 months ago

    Actually, just to align the whole block (with no extra gaps between images) in the centre. Would be most useful… Thanks

    Plugin Author mr_speer

    (@mr_speer)

    12 years, 2 months ago

    I think the first issue is that you’re targeting the .si_feed_widget, which isn’t what you’re pulling in via a shortcode. You want to target the .si_feed.

    From there, I think the easiest solution would be to set the width of each .si_item to 33% and then align the images within them in the center using text-align: center;. So the CSS would be:

    .si_feed .si_item{
  width: 33%;
  text-align: center;
}

    If you wanted to remove the spaces between the images, you could pull in a larger image size in the shortcode (eg [si_feed size="medium"]) and then set the img size to 100% of the .si_item:

    .si_feed .si_item img{
  width: 100%;
  height: auto;
}

    With this solution, the feed with react well with your responsive theme as well.

    Hopefully that at least gets you on the right track!

    mr_speer

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Overriding Theme/SI CSS’ is closed to new replies.