Title: header image/elements mobile overlay issue
Last modified: April 19, 2020

---

# header image/elements mobile overlay issue

 *  Resolved [collinvarney](https://wordpress.org/support/users/collinvarney/)
 * (@collinvarney)
 * [6 years ago](https://wordpress.org/support/topic/header-image-elements-mobile-overlay-issue/)
 * Hi,
 * On all other pages from the menu on mobile and desktop, the header image and 
   contents below it are spaced out, but on the home page for MOBILE view, there
   is an odd overlay issue that I can’t crack.
 * It seemed to have occurred after updates (I fixed other pages with an image box
   for header instead because I didn’t want to deal with header image changes in
   theme), but for the home page, it doesn’t seem to stick on mobile.
 * I appreciate any guidance on this issue!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fheader-image-elements-mobile-overlay-issue%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Thread Starter [collinvarney](https://wordpress.org/support/users/collinvarney/)
 * (@collinvarney)
 * [6 years ago](https://wordpress.org/support/topic/header-image-elements-mobile-overlay-issue/#post-12698775)
 * I meant to mention that the same issue occurs with a tablet view as well.
 *  Theme Author [themevision](https://wordpress.org/support/users/themevision/)
 * (@themevision)
 * [6 years ago](https://wordpress.org/support/topic/header-image-elements-mobile-overlay-issue/#post-12700269)
 * Hello [@collinvarney](https://wordpress.org/support/users/collinvarney/)!
 * The problem you have is caused by your customization of the Elementor Page builder
   Elements. In two Elements (elementor-element-1d619d0 and elementor-element-1290cb0)
   you added margin-top and margin-bottom values ​​of -600px (on screen widths less
   than 1024px). Also, on screen widths less than 767px. these elements have margins
   of -240px.
    When I turn off these settings, your site is working normally. [https://pasteboard.co/J4ET7Wq.png](https://pasteboard.co/J4ET7Wq.png)
 * Regards
 *  Thread Starter [collinvarney](https://wordpress.org/support/users/collinvarney/)
 * (@collinvarney)
 * [6 years ago](https://wordpress.org/support/topic/header-image-elements-mobile-overlay-issue/#post-12701555)
 * Thank you so much for that information about the Elementor elements. I’m new 
   with a lot of this, so I could really use some clarification on how to save those
   changes you speak of.
 * I’m able to make those changes happen in Inspector (though mine doesn’t look 
   the same as yours in the screenshot, which might be part of my confusion), but
   I don’t know how to save those changes once they’re made.
 * How do I do that?
 *  Theme Author [themevision](https://wordpress.org/support/users/themevision/)
 * (@themevision)
 * [6 years ago](https://wordpress.org/support/topic/header-image-elements-mobile-overlay-issue/#post-12701696)
 * Hello, [@collinvarney](https://wordpress.org/support/users/collinvarney/)!
 * There are two ways to solve this:
 * 1.
    Edit your HomePage with the “Elementor” page builder, then click on the element
   you want to change margins, open the “Advanced” tab, select the Tablet/Mobile
   mode and remove the margins. [https://pasteboard.co/J4GARer.png](https://pasteboard.co/J4GARer.png)
 * or
 * 2.
 * Insert the following code into Customizing->General->Additional CSS:
 *     ```
       @media only screen and (max-width: 1024px){
       .elementor-10 .elementor-element.elementor-element-1d619d0,
        .elementor-10 .elementor-element.elementor-element-1290cb0{
         margin-top:inherit!important;
         margin-bottom:inherit!important;
        }
       }
       ```
   
 * Regards
 *  Thread Starter [collinvarney](https://wordpress.org/support/users/collinvarney/)
 * (@collinvarney)
 * [6 years ago](https://wordpress.org/support/topic/header-image-elements-mobile-overlay-issue/#post-12701962)
 * Awesome! Thanks so much.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘header image/elements mobile overlay issue’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/agama/1.7.2/screenshot.png)
 * Agama
 * [Support Threads](https://wordpress.org/support/theme/agama/)
 * [Active Topics](https://wordpress.org/support/theme/agama/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/agama/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/agama/reviews/)

## Tags

 * [header image](https://wordpress.org/support/topic-tag/header-image/)
 * [mobile view](https://wordpress.org/support/topic-tag/mobile-view/)

 * 5 replies
 * 2 participants
 * Last reply from: [collinvarney](https://wordpress.org/support/users/collinvarney/)
 * Last activity: [6 years ago](https://wordpress.org/support/topic/header-image-elements-mobile-overlay-issue/#post-12701962)
 * Status: resolved