Empty space on Mobile only

Hi,

For some reason, there is a big gap between my svg and the next section, this is affecting iPhone ONLY, I have tested out on 2 different iPhones and 1 Android and the Android seems to be ok.

I have recreated the element, using a new class and svg image, but the problem is still there.

This is the live link: https://ethansuero.webflow.io/

I was checking this with another friend who also use webflow but we cannot find any issue as there is only affecting iPhone devices, might be a bug?

Thanks!


Here is my site Read-Only: [https://preview.webflow.com/preview/ethansuero?utm_medium=preview_link&utm_source=dashboard&utm_content=ethansuero&preview=7ef60efe55a70dc8ae3db3d79c173b9f&mode=preview][1]

Hi @EthanSuero - FYI. Your issue is not iPhone specific. Affects Chrome on IOS, Chrome on Android, etc.

CloudApp

This is a layout / design issue not a bug. Topic moved to Design Help → Layout. You should be able to get some advice there.

You also have some layout issues on OS X (safari) on the content below that section.

1 Like

Thank you for your reply!

Indeed, I actually tested on iPad and the issue is also there, in all cases was using safari.

I was thinking that maybe I could try a different way to achieve the same result (ie, moving the svg to he section below and use absolute position to overlap the section above, maybe this solve the issue?

Will try and see how it goes, in the meantime anyone might be able to help?

I thing you have A little mess with the Layout. try to implement the instruction like in the attach image, hope it will help :slight_smile:

Hey @shokoaviv !

Thank you for your reply, unfortunately that does not fix the problem and also broke the navbar across the site and the header does not respond to the size of the viewport.

I just realized that the home_header_section had no position setted, but after changing this to relative the problem has been fixed!

1 Like

The most important thing is that the problem is behind us - let’s tear into the next problem!!!

For the curious, wondering why Ethan’s change fixed the issue;

Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static ). If a positioned ancestor doesn’t exist, it is positioned relative to the ICB (initial containing block — see also the W3C definition), which the containing block of the document’s root element.

Source: position - CSS: Cascading Style Sheets | MDN

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.