Resizing issue with -40 margin +40 padding, on your own demo why?

Can you kindly explain why this css is here on the following demo?
https://woodmart.xtemos.com/megamarket/all-products/

.main-page-wrapper {
    margin-top: -40px;
    padding-top: 40px;
    min-height: 50vh;
    background-color: var(--wd-main-bgcolor);
}

We are trying to maintain clean css and this part is somewhat odd, when you resize the screen it acts odd as well and creates allot of white space at the top as seen on your own demo and also seen on various device sizes.

Please advise and thank you.

Hello,

You need to reload the page after you resize the browser to make it look as designed. Note that when you visit your website with a real mobile device you will not see the white space.

Kind Regards

Ok thank you, is this due to your proprietary menu system used, that is only limited to two break points? Thanks

It is due to the header height calculation. It should be recalculated when you resize the browser because the desktop header has a bigger height than the mobile.

[Author]

Posts