WordPress.org

Ready to get started?Download WordPress

Forums

Weird Horizontal Spaces between aligned images? (5 posts)

  1. jaywontdart
    Member
    Posted 1 year ago #

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

    http://www.invsoc.org.nz/we-are-invsoc/

    preview screenshot

    http://www.flickr.com/photos/jaywontdart/8157182589/in/photostream

    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
    Member
    Posted 1 year 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
    Member
    Posted 1 year 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
    Member
    Posted 1 year ago #

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

    http://www.flickr.com/photos/jaywontdart/8234285606/in/photostream

    No gaps between photos now! Thank you!

    http://www.invsoc.org.nz/we-are-invsoc/

    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?

    http://www.invsoc.org.nz/wvd2012

    Thank you vtxyzzy :-)

  5. WPyogi
    Volunteer Moderator
    Posted 1 year 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