Header and absolute position

[Fabrica]

I have a header set as absolute. In the mobile version I used a gap (which I hide in the desktop version) to distance the content from the header. Is there any other way to achieve this when I have an absolute header?

thanks

[marc_a]

Hi @xonetit,

Thanks for reaching out!

Would you mind sharing your admin credential so that we can clearly check your setup? To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[christian]

Hey @xonetit,

What you’re doing is already correct. To have different space size, you need to use 1 Gap element per screen width or breakpoint. Instead of setting a PX value for the Gap Size, try playing with the VH as it is more dynamic meaning the value would differ depending on the screen’s height. You can learn more about the VH unit here https://www.w3schools.com/cssref/css_units.asp

In the next version of Pro, there’d be a responsive setting so you can set settings per breakpoint. You can know more about the coming features in our latest Status Update here https://theme.co/content

Hope that helps.

[Fabrica]

Thanks Christian.
I’ve tried to add a gap with vh, but I’ve an differrent from mobile version an desktop. It seems that with the vh the mobile version differs instead with px both builder, inspector and device are identical

I’ve try on an a device with these specifics
Realme 8 PRO
Size 6.4 inches, 98.9 cm2 (~83.3% screen-to-body ratio)
Resolution 1080 x 2400 pixels, 20:9 ratio (~411 ppi density)

set to 18.8vh

set to 220px

[tristup]

Hi @xonetit,

The vh unit stands for hundredths of the viewport height and changes depending on the height, a value of 1vh is equal to 1% of the viewport height. Please find the value of these units will be in different situations:

1. If the viewport is 1200px wide and 1000px high, the value of 10vh will be 100px.
2. If the device is now rotated so that the viewport becomes 1000px wide and 1200px high, the value of 10vh will be 120px.
3. If you resize the browser window so that the viewport becomes 1000px wide and 800px high, the value of 10vh will become 80px.

I would suggest you go through the article on how the vh and other unit works.

https://www.quirksmode.org/css/units-values/viewport.Html

Thanks

[Fabrica]

this is clear to me, what is not clear to me and why the mobile version (if set with vh) is different from the builder version, and the chorme inspector … I mean that if I open the page from the phone the result does not correspond to that of the inspector and the preview of the builder (mobile)
se to px value

set to vh value

[tristup]

Hi @xonetit,

I have checked the page you mentioned in the screenshot and didn’t find any differences in the Builder view and Browser view in the same breakpoint. I have checked it on my Andriod mobile too and the result was the same. I would suggest you check once by clearing all cache and in incognito/private mode of the browser and let us know if that resolves the problem.

Thanks