I'm trying to code a simple and clean coded website (I'm a beginner) and I'm using waves from https://getwaves.io/ to improve the design. I'm separating each section/div with a simple wave to separate them and each of them has a different color (of course, what would be the point of putting a wave then...)
When I'm looking at the result on my laptop with Safari, Chrome and Firefox: no problem at all.
On my iPhone btw, on both Safari and Chrome, the first separation looks fine, but all the others look separated from the upper section by a thin horizontal line and I really don't get why.
Here are some screenshots to explain better, I'll provide code below.
The test site if you want to see by yourself either on laptop (no problem) or smartphone (problem): https://www.pierreherbillon.com/perseus/
Here's the code:
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@100;300;900&display=swap');
body,html{
margin: 0;
padding: 0;
scroll-behavior: smooth;
max-width: 100%;
overflow-x: hidden;
}
h1 {
font-size: 5em;
margin:0;
padding:0;
letter-spacing: 5px;
}
h2 {
font-size: 3em;
margin:0;
padding:0;
}
h3 {
font-size: 2em;
margin:0;
padding:0;
}
h4 {
margin:0;
padding:0;
font-size: 1.25rem;
}
p {
font-family: 'Prompt', sans-serif;
font-weight: 300;
line-height: 1.7em;
}
a {
font-family: 'Prompt', sans-serif;
font-weight: 500;
text-decoration: none;
line-height: 1.7em;
}
.section{
text-align: center;
align-items: center;
min-height: 100vh;
background-size: cover;
}
#section0 {
background-color: #d4b4b4;
}
#section1 {
background-color: #d7d7d7;
}
#section2 {
background-color: #474747;
}
#section3 {
background-color: #f0f0f0;
}
#section4 {
background-color: #d4b4b4;
}
#section-footer {
background-color: #383838;
}<div class="section" id="section0">
<nav>
<!-- here is the code of the navbar, i don't yhink it is relevant for this matter -->
</nav>
<img class="logo" src="pegasus-logo2.png" alt="logo" width="300px" />
<h1>PERSEUS</h1><br><br><h4 style="letter-spacing: 10px; font-family: 'Prompt', sans-serif; font-weight: 100;">Un site pour vous ?</h4>
</div>
<!-- SECTION 1 -->
<div class="section" id="section1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 192"><path fill="#d4b4b4" fill-opacity="1" d="M0,0L120,26.7C240,53,480,107,720,138.7C960,171,1200,181,1320,186.7L1440,192L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z"></path></svg>
<div class="rows">
<div class="column1">
<h2 style="text-align: center;">Section 1</h2><br>
<p>
<!-- SOME TEXT HERE -->
</p><br><br>
</div>
</div>
</div>
<!-- SECTION 2 -->
<div class="section" id="section2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 192"><path fill="#d7d7d7" fill-opacity="1" d="M0,0L120,26.7C240,53,480,107,720,138.7C960,171,1200,181,1320,186.7L1440,192L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z"></path></svg>
<div class="rows">
<h2 style="text-align: center; color: #f0f0f0;">Section 2</h2><br>
<div class="column2">
<p style="color: #f0f0f0;">
<!-- SOME TEXT HERE TOO -->
</p>
</div>
<div class="column2">
<p style="color: #f0f0f0;">
<!-- SOME TEXT HERE TOO -->
</p>
</div>
</div>
</div>
<!-- SECTION 3 -->
<div class="section" id="section3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 192"><path fill="#474747" fill-opacity="1" d="M0,0L120,26.7C240,53,480,107,720,138.7C960,171,1200,181,1320,186.7L1440,192L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z"></path></svg>
<div class="rows">
<h2 style="text-align: center; color: #565656;">Section 3</h2><br>
<div class="column3">
<p style="color: #565656;">
<!-- SOME TEXT AGAIN -->
</p>
</div>
<div class="column3">
<p style="color: #565656;">
<!-- SOME TEXT AGAIN -->
</p>
</div>
<div class="column3">
<p style="color: #565656;">
<!-- SOME TEXT AGAIN -->
</p>
</div>
</div>
</div>