• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Essence Pro Atomic Blocks Overlap issue

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Essence Pro Atomic Blocks Overlap issue

This topic is: not resolved

Tagged: Essence Pro

  • This topic has 4 replies, 4 voices, and was last updated 5 years, 9 months ago by PC888.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 30, 2019 at 3:43 am #493300
    citilife
    Member

    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?

    August 30, 2019 at 4:51 am #493303
    Victor Font
    Moderator

    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?

    August 31, 2019 at 12:58 am #493321
    PC888
    Participant

    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

    September 1, 2019 at 4:25 am #493346
    alexweb11
    Member

    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?

    September 4, 2019 at 9:34 pm #493409
    PC888
    Participant

    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
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble