I have added “Hidden” but it still overflows horizontally. I have also tried adding it in the section that contains everything but it keeps overflowing.
Hi Julian,
Thanks so much for your report, and welcome to the forum!
This is more of a “how to” question rather than a bug, so I’ll move the thread accordingly.
Absolute positioning and mobile responsiveness together is generally a complex undertaking, because the position is absolute and ignores the actual flow. In your case, I would do without absolute positioning at all in the hero section, so the image can simply follow the flow, which makes everything a lot easier to handle.
In order for it to follow the flow, you should change the section from height to min-height (and add some top and bottom padding), because the narrower the viewport, the higher it has to be to fit the content.
You have currently assigned overflow: hidden to almost every element, which in most cases has no effect at all. Generally, you apply the overflow to the parent element if you want to prevent its content from overflowing. You can read more about overflow here: overflow - CSS: Cascading Style Sheets | MDN
Thank you very much for such excellent feedback for someone a bit lost,
I was trying to generate that image in the hero to stand out from the overall block, trying to generate a continuous design with the other images also overflowing a bit.
But maybe I was making my life too complicated to be just learning.
Thank you very much for the info about Min-max height, so it is easier to structure everything adding the internal padding.
