--spacer-height bug when I edit the header

On several occasions when I edit the header, suddenly starts jumping in the mobile versions when I open a page.

It used to work normally, but at one point to another failure.

http://1e1ca2-511f3.preview.intensse.studio

(I have video of the bug, but I don’t know how to share it)

Hi! I don’t know exactly if I understood the issue … you are saying that the space between the top and the rest of the content is changed after the page finish loading, right?

From what I’ve seen the css variable --spacer-height initially has a default value (given throught css) and then it is adjusted using when the page finish loading.

:root{
--spacer-height: 105px; //this is the initial value
}

This --spacer-height is calculated dynamically based on a wrapper element (at least this is what I’ve seen in the code).

Related to why is this more noticeable than it was before … I think it is because your page has more elements (is bigger) now and it takes a bit more time to load.

If you want, I think you can force the value of --spacer-height to be whatever you want, but you will need to handle this for each responsive breakpoint (otherwise it will be the same on any device).
Try this code, on your top banner container (the one with Iniciar sesión)

// this is your banner id , if you want to make it global use the .preset-banner-v3-default class
#ed-68027287 {
    --spacer-height: 80px;
}

I hope it make sense.

P.S. If you want to upload a video on the forum/community, … it is the same way you’ve uploaded the image

1 Like

Hey there, could you maybe upload the video via WeTransfer or record it with loom? Or just upload it directly in a message.

It doesn’t allow it to be uploaded as a video, but I made a GIF

GIF-2021-08-18-11-04-21

Testing the page on my phone, when I open a page appears for a few seconds the menu (like a ghost)

GIF-2021-08-18-11-06-53

The same is happening to me when I change my sight in the editor

GIF-2021-08-18-14-39-48