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/
Share Improve this question asked Dec 7, 2018 at 20:20 facechompfacechomp 134 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
2 Answers
Reset to default 0Interesting 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.