gallery - Text lost under image after WordPress 5.0 upgrade

Right beneath the testimonial is the text <p>Tony (Property Manager)</p>, but it's overlapped by the WordPress 5.0 gallery that follows it. I don't think it's a float problem.

Here: /

Right beneath the testimonial is the text <p>Tony (Property Manager)</p>, but it's overlapped by the WordPress 5.0 gallery that follows it. I don't think it's a float problem.

Here: http://www.sunnyexteriors.ca/tony-property-manager-soffits/

• gallery
• updates

Share Improve this question asked Dec 7, 2018 at 20:20 facechompfacechomp 1344 bronze badges 1

• Since this is theme-specific it would be best to contact the theme author directly and confirm whether or not the theme is compatible with 5.0 and the block editor specifically. – WebElaine Commented Dec 7, 2018 at 20:26

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Interesting problem... I went into the page in Chrome and used the Development Tools (ctrl+shift+I) or just right click on the element and select Inspect.

The images are being displayed in a Flexbox and it looks like there is a conflict between the Flexbox and the blocks above it. There are a number of ways to fix the problem, the first and easiest, but most likely the wrong fix is to put a line break after the paragraph containing the name Tony. However, this is not a good solution, it just adds space hides the problem.

I also noticed that the image in the Flexbox is being displaced upwards by 1.5em. Further inspection showed that there is a style applied to the image as:

.entry-content img {
    margin: 0 0 1.5em 0;
}

This places a bottom margin on the image of 1.5em and the image then falls outside the FlexBox by the 1.5em applied to the bottom margin.

If you set this margin to 0 then this resolves the problem.

.entry-content img {
    margin: 0 0 0 0;
}

I am not sure why this would only have appeared in Wordpress 5.0 and look forward to suggestions from other members. However, I do think that the margin applied to the image along with a height setting of 100% is incorrect and the bottom margin should either be removed or set to 0.

Your gallery is set to display: flex and the images are running outside of the container. A quick fix is to add overflow:hidden to the container.

.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    overflow: hidden;
}

The real cause of the problem is because your images inside of the gallery are set to height: 100% but have a margin on the bottom of 1.5em, this causes the image to overflow the container. So you could remove that margin for images inside of your gallery like this.

.wp-block-gallery .blocks-gallery-item img {
    margin-bottom: 0 !important;
}

Use whatever solution works best in your setup.