I’m working on my website and I’m trying to use some waves to break up the background, however some errors occur when I resize my screen. The problem is that the wave start “flying” with a whitespace between the other wave when the screen is rezised, the error occurs since I need to adjust the waves height to 320px for it to be visible on a normal desktop view, since it is for some reason hidden behind the next div when the height is not set to 320px
Any ideas?
Code:
<div class="feature" style="height: 320px;background: var(--primary-color);"><div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 550"><path fill="var(--wave)" fill-opacity="1" d="M0,160L80,165.3C160,171,320,181,480,170.7C640,160,800,128,960,133.3C1120,139,1280,181,1360,202.7L1440,224L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg></div></div>
What it looks like with 320px height on dekstop screen size:
https://cdn.discordapp.com/attachments/381547722374774784/943127798967566376/unknown.png
What it looks like with 320px height on small screen:
https://cdn.discordapp.com/attachments/381547722374774784/943127798694965288/unknown.png
If I set the height to 0px the wave is not visible on desktop since it hides under the next div, not sure why. Any help appreciated – thanks