1

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/

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
    Dec 7, 2018 at 20:26

2 Answers 2

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.

Fix by adding a break - not the best way

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;
}

CSS Fix - better way

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.