[Support request] Odd Margin/Padding Alongside First Image

Home Forums Support Odd Margin/Padding Alongside First Image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #538883
    Martin

    One of my pages has three images and text wrapped around the image (default WordPress styling/functionality). However, the text that is wrapped around the first image on the page has a large amount of top margin or top padding. It only happens on the first image on the page (if I copy/paste this chunk lower down the page, the issue goes away).

    With a bit of digging using Chrome Dev Tools, I’ve noticed if I uncheck display: table in the following snippet, the problem resolves itself:

    .clear:after, .clear:before, [class*=content]:after, [class*=content]:before, [class*=site]:after, [class*=site]:before {
    
    content: '';
    display: table;
    }

    Any ideas on how to fix this?

    Link: http://creativepollen.com/cf/coast-fork/staff/

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #539234
    Tom
    Lead Developer
    Lead Developer

    That space is being caused by the paragraph tag around the first image.

    You should prevent it by adding the

    elements manually around the first image in the “Text” tab within the editor:

    <p style="margin-bottom: 0;"><img src="URL TO IMAGE" alt="" /></p>

    #539243
    Martin

    I am not adding any paragraph tags — and besides, it is only happening for the text alongside the first image on the page. If, for example, I move the Amanda image and bio under the Reilly image and bio, the Amanda text appears fine but the Reilly text will have the big margin/padding at the top.

    Below is how this looks in the code editor under the ‘Text’ tab:

    <img src="http://creativepollen.com/cf/wp-content/uploads/2018/03/staff_amanda-300x225.jpg" alt="amanda gilbert" width="300" height="225" class="alignleft size-medium wp-image-27858" /><h4>Amanda Gilbert
    Executive Director</h4>
    Amanda joined the Coast Fork Willamette Watershed Council as Executive Director in November 2015...
    
    <img src="http://creativepollen.com/cf/wp-content/uploads/2018/03/staff_reilly.jpg" alt="Riley Newman" width="120" height="120" class="alignleft size-full wp-image-27856" /><h4>Reilly Newman
    Projects Coordinator</h4>
    Reilly began working with the CFWWC as Education & Outreach Coordinator in November 2013...

    As you can see, there is no formatting or tag differences between the two. It’s only ever the first one that has a problem.

    As previously mentioned, if I disable the display: table; CSS, the image is resolved.

    #539284
    Tom
    Lead Developer
    Lead Developer

    WordPress adds the paragraph elements automatically. However, if you add it manually and set the margin to 0, it will fix the issue.

    The CSS you’re disabling is simply clearing any floats, which makes it so the margin shows up (as it should).

    #539287
    Martin

    Thanks for your reply, Tom. Any idea why this is only happening to the text that wraps around the first image, and is not a problem for the text that wraps around the images further down the page?

    I’d prefer not to have to add paragraph tags manually because I think seeing HTML in the wordpress editor would be a bit confusing/concerning to the client.

    #539292
    Tom
    Lead Developer
    Lead Developer

    It’s not happening with the other images because the floats aren’t cleared.

    You can try something like this to prevent it:

    .entry-content:before {
        display: none;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.