Essence Pro Atomic Blocks Overlap issue

[citilife]

I just updated to the latest version of WP and studiopress theme Essence Pro on a staging site and I am experincing some problems with the AB Posts block on the homepage.

It overlaps any blocks place above it

https://indieauthor-dev.10web.site

does anyone know why this might be happening and know a simple way to rectify it?

[Victor Font]

It doesn't look like your style sheet is loading and when I clicked on your style sheet link in the source code, I received a security message that the link is a deceptive site. Your site may have been hacked.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[PC888]

When you click on the AB Posts Block, look in the right hand settings menu for 'Advanced'; click on this and you'll see that the block is given the class of 'margin-overlay'.

In front-end.css ~ line 66 you'll find the following -
.margin-overlay {
margin-top: -100px;
}

You can either remove the class from the block or modify/remove the css.

Paul

[alexweb11]

I have a similar issue but just on mobile devices on smaller screens. Where the feature image of the post on the home page does not overlap the header image. It displays it below the header image on the mobile.

It works fine on bigger screens.

I have got the margin-overlay set in the advance options.

You can test this yourself with the essence pro demo and shrink the browser window.

Notice how on the smaller screen sizes the feature image on the post on the home page drops below the header image no longer overlaps. On the previous version of the theme (where they are using widgets) for the homepage, the overlapping stays even on the smallest screen on mobile.

Does anyone know how to fix this for the new block version of the theme?

Where is the front-end.css file located?

[PC888]

Hey alexweb1, you will need to add the .margin-overlay styling to the various break points in your media queries if you want it to overlap on smaller screen sizes. Perhaps try -75px at (max-width: 860px) and adjust the overlap to suit each breakpoint.

front-end.css is located in /lib/gutenberg/

[Author]

Posts