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.
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?
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!
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.
