layout error

Good evening,

There are surprising things on the visuals, I indicate a margin at -40 px, on inspection I see a padding top at 199 px?

Where is the error? I see a lot of things like that, it’s annoying because you can’t move forward without going back on small details.

Thanks in advance,

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

Hello,

Indeed, how do you explain this? I never indicated a padding-top: 199 px;

So you will have to tell me the solution, so that I can interact on the other pages.

Hello,

Please check the site on a real device or reload the page if you check in the browser: https://gyazo.com/2f36bf348b1e58389675dba5a042cfd4

Let us know if the problem remains on a real device.

Best Regards

Good evening,

I have to put a margin at -140 to raise the element, but after a few days a padding-top of 199px appears out of nowhere why? I do not know …

It’s annoying, it’s been 3 times that I come back to the same thing, I screened so that you realize in the event of a new return, if I don’t touch the margins, it must remain as it is, right?

Attachments:

You must be logged in to view attached files.

Hi,

Your desktop header height is 199px – https://prnt.sc/Ak3HVNGgo_M1
Your mobile header height is 99px – https://prnt.sc/6MuYU4vneBBe

By default, in our theme header height is recalculated on page reload which is not visible on real mobile devices, but when you change devices screen width in Elementor editor – header height is not recalculating, and you can see desktop header spacing with mobile header before page is reloaded. To fix your issue, just ignore header spacing in Elementor editor and leave margin-top: -40px both for desktop, tablet and mobile.

Kind Regards

Hello,

What we build on elementor is not real, you have your own line of code on that, elementor creates another one, so if I indicate a -140 px to make up the difference it won’t work!

You must therefore indicate marigin-top: -40 px; I do it on which selector so that of elementor, or in a selector of the theme. If I indicate -40 px of top margin on elementor , I still have the same problem so should indicate this in a class but which one?

Thanks for your feedback, I understood that your line of code overwrites changes with elementor,

Hello,

With a margin top -40 there is always a shift, what is needed is the exact selector to be able to interact on it, it wastes time guys, give me a selector that solves the problem once and for all, sorry but I’m not going to put -40 px; I have an offset, -140 px, this creates conflicts, there is indeed a selector which definitely acts on this problem and hop on to something else

Attachments:

You must be logged in to view attached files.

Hi,

1. You don’t need to set -40px three times for different device’s resolution. You can set it only for desktop, and it will work the same on other smaller devices.
2. As we said in previous reply header spacing will change only after page reloading. So if you test your site on desktop, you need to reload your webpage after switching between mobile/desktop resolution like is shown on video (https://gyazo.com/de36db7c4cceb7701d9343da265b3543). The following behavior only applies to mobile testing on a desktop computer.

We have checked your site on different devices and everywhere the header spacing looks completely normal, please see the following screenshots:

Desktop – https://prnt.sc/Xls-UrdzkNr-
Tablet – https://prnt.sc/Z4Fe_9kSjvxH
Mobile – https://prnt.sc/U4ToTHbwzWdl

Kind Regards

Hello,

It does not work,

If I put -40 px; it goes way back

You have to put a selector that works: wait there is a way to act effectively, you have made the theme you know exactly what is needed:
We start with a padding-top of 99 px and 199 px in desktop ok,

If I put margin-top: 0px; it doesn’t work it goes back too high…

margin-top: – 40px; we can’t see anything ;*

I was given the padding-top selector 0! important ; it doesn’t work either, in short I empty the caches, but there is always a gap;

Give me the right selector and to go up to align with the top, it’s not complicated, is it?

Hello,

As seen, I indicated a margin-top only for the pc at -40 px;

your sticky header at 199 px, , does not allow me to modify as I wish, it makes deviations each time, in short, I need a solution to put all this back together, you tell me that it is done by itself, on d’ other tablet devices, and computer there is a lag, so I am waiting as I say for a solution to no longer have this lag.

Attachments:

You must be logged in to view attached files.

Hi,

As was said on previous reply https://xtemos.com/forums/topic/layout-error/#post-410243 spacing between content and header can be changed by modifying first Elementor row martin-top value. After you done that spacing between header and content was removed and looks normal as was tested in following reply https://xtemos.com/forums/topic/layout-error/#post-410538.

If you want to permanently remove header margin bottom from all your pages via CSS, you need to:

1. Remove all your previous custom code related to header.
2. Add the following custom code to Global custom CSS area field in theme settings:

body .whb-header {
	margin-bottom: 0px;
}

But in the following case, header space can be missing on pages like single product or my account, and it will require additional changes.

Kind Regards

Hello ,

Thanks for your feedback,

Understand that I make the modifications with elementor , if a margin-top on elementor of -40 px, and I don’t touch anything else , it will work with the sticky effect raised from the header .. Ok I do that, then I’ll see if it bugs or not…

Hello,

Let us know if you have any issues.

If you have any questions please feel free to contact us.

Best Regards

Thanks for your feedback,

I will let you know of my difficulties if I encounter any.

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts