Weird Horizontal Spaces between aligned images? (5 posts)

  1. jaywontdart
    Posted 3 years ago #

    I'm having an issue with "horizontal spaces" between aligned images which are NOT there in the preview


    preview screenshot


    Any help removing these would be very welcome!

    I believe its something in the CSS about somehow "forcing a space" even when I havnt asked for one?

    Thank you for your help!

  2. vtxyzzy
    Posted 3 years ago #

    That gap is caused by the line-height of 24px. There doesn't appear to be a very specific class for the images, so a CSS rule can only be applied for that Page (ID = 506).

    You should create a Child theme to make your changes. If you do not, all of your changes will be lost if you update your theme.

    Try adding this to the end of your child theme's style.css:

    .post-506 .entry-content p { line-height: 0px; }
  3. jaywontdart
    Posted 3 years ago #

    Thank you very much for your help vtxyzzy, I cant try it just now, but if your suggestion works, I wouldnt be able to help you enough!

    Thank you, thank you, thank you :-)

  4. jaywontdart
    Posted 3 years ago #

    A friend told me that I could use Jetpack and its "Custom CSS" plugin, which seems to have worked!


    No gaps between photos now! Thank you!


    However, there are still gaps between these photos here, which is odd. I'm going to keep looking to fix this, the same line gap between images stacked next to each other. I'm wondering if the CSS rule is not applying to every page or something?


    Thank you vtxyzzy :-)

  5. WPyogi
    Forum Moderator
    Posted 3 years ago #

    You have those photos inside <h2> tags -- and the line-height of 1.5 on h2 tags is creating the space. Images should not be in h tags anyway so fixing that should also close the gaps.

    Looks like there may be some other line-height CSS attached to #content that may keep part of the gap. Try using Firebug to sort that out. You may need to add some CSS to target images -- try this:

    body #content img {
       line-height: 1;

Topic Closed

This topic has been closed to new replies.

About this Topic