I have a problem with the position of two divs only in the smartphone version. The divs ‘name project wrapper’ and ‘project info button’ are displayed higher than expected. They should have a 17px separation from the lowest position. It only works correctly when the browser is hidden.
The 17px separation issue you’re experiencing on mobile devices is likely due to collapsing margins, which occurs when the margins of adjacent elements combine. Here’s how to resolve this:
The most reliable fix is to use padding instead of margins. In the Style panel, select the parent element and adjust its padding values under Spacing controls. Alternatively, you can add specific margin values to individual elements while ensuring they don’t collapse with adjacent elements’ margins.
To adjust these settings:
Select the affected element in the Designer
Open the Style panel
Navigate to the Spacing section
Set specific padding or margin values as needed
Test the layout across different device previews to ensure consistent spacing
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
I found the solution by discovering the existence of dynamic viewport height. So I replaced 100vh with 100svh in the slide and the mask, and everything was fixed.