Overflow-x: hidden causes vertical scrolling
Hey!
I'm working on a website, and I have two problems I'm trying to figure out:
1- I have a hero section where I position some decorative SVGs using position absolute, and I need them to overflow over the viewport, so I use overflow-x: hidden on the parent I end up with vertical scrolling on only the section, Why is this behavior happening? 2- the div .separator class has width: 100% and I applied a margin on it (all four sides) but it does not get applied on the right, why is that? Here is the web page: https://644bfc6b0eba930d586dd80f--stirring-pastelito-35a5e1.netlify.app/ Thanks a lot P.S: if I move the dive with .separator class inside the div with .hero class the vertical scrolling dissapears
1- I have a hero section where I position some decorative SVGs using position absolute, and I need them to overflow over the viewport, so I use overflow-x: hidden on the parent I end up with vertical scrolling on only the section, Why is this behavior happening? 2- the div .separator class has width: 100% and I applied a margin on it (all four sides) but it does not get applied on the right, why is that? Here is the web page: https://644bfc6b0eba930d586dd80f--stirring-pastelito-35a5e1.netlify.app/ Thanks a lot P.S: if I move the dive with .separator class inside the div with .hero class the vertical scrolling dissapears
6 Replies
The contact me button make it
display:inline-block; to stop the vertical scrolling inside the hero
The .seperator should have the width:100% removed, as it's causing horizontal scrolling with the margin it has extraBut why is that? I have not set a height on .hero so the height should be determined by the content inside it.
for the .separator should width: 100% be 100% of the parent?
Because the
<a> is an implicit display:inline and as such the padding does not grow the hero, it makes it scroll
The seperator is overflowing because the width is 100% plus the 2rem margin making it 100%+4rem wide. <div> is a blocked element so it already takes up as much width as it can and the width is unnecessary (if you did want the width and the margin you can use width: calc(100% - 4rem))ah, totally makes sense, thanks @zed_dash
No problem, glad to have helped 😊
Unknown User•14mo ago
Message Not Public
Sign In & Join Server To View