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 2 years, 12 months ago by Shahin.

Hi @skalanter , thanks for your kind help.
After applying the above mentioned code the gap shifts to the bottom of header as shown in Screenshot.

i tried to make bottom with zero value but the page below that wipes off.
please have a look!

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