Mobile Header showing padding

Hello @eyewayonline,

It seems the issue is related to the extra space on Elementor page build. You need to find it and set it “0” on mobile size. Would you please check this screenshot: https://i.postimg.cc/xCXsBHhv/image.png.

If you didn’t it, please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

@media(max-width: 480px) {
    #wrap .elementor-element-9c95f94 {
        top: 0 !important;
    }
}

Also, you can use “Inspect Element” tools on the browser. Please follow the steps explained in this link: https://www.greengeeks.com/tutorials/article/use-the-inspect-element-tool-in-chrome/.

https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

CSS Tutorial: https://www.w3schools.com/css/
CSS Units: https://www.w3schools.com/cssref/css_units.asp
Responsive Sizes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Put your CSS on custom screen size:

@media only screen and (max-width: 480px) {
    /* put you CSS here*/
}

Or use between sizes:

@media (max-width: 960px) and (min-width: 481px){
    /* put you CSS here */
}

Best Regards

• This reply was modified 4 years, 5 months ago by Shahin.

Hi @eyewayonline,

Please add the CSS below to fix that gap issue:

@media(max-width: 760px) {
    #wrap .elementor-element-baf480f {
        max-height: 0;
    }
}

Best Regards