Add a margin-bottom to an embedded image in a post

  • Resolved livingitupct

    (@livingitupct)


    8 years, 2 months ago

    Hi all

    Pulling my hair out here as a CSS newb. I am trying to add a little space between embedded Instagram pics and the paragraph that follows, but I’m stuck.

    An example post is here –> https://www.livingitupct.com/2016/09/09/yay-yay-its-friday/

    You’ll notice that directly after the image, there is no bottom margin.

    Checking on Firebug, I see it’s within an iframe <iframe id=”instagram-embed-2″ class=”instagram-media instagram-media-rendered” and it has margin: 1px

    I would like to update this to add a 10 or 20px bottom margin but everything I’ve tried hasn’t worked.

    I suspect that I haven’t got the syntax correct. Any assistance would be appreciated.

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

  • Hi

    I took a look at your site and I think the following will work quite nicely as the class remains consistent even when multiple iframes are rendered.

    Add this to your Custom CSS / Childtheme’s style.css 

    
iframe[class="instagram-media instagram-media-rendered"] {
    margin-bottom: 20px !important;
}

    Let me know if this works ??

    All the best!

    Thread Starter livingitupct

    (@livingitupct)

    Thanks epic – works like a charm.

    Now I just have to understand what it did.

    Thread Starter livingitupct

    (@livingitupct)

    Ignore me, it does work. Didn’t clear cache.

    • This reply was modified 8 years, 2 months ago by livingitupct. Reason: Wrote nonsense
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Add a margin-bottom to an embedded image in a post’ is closed to new replies.