Landing page text hiding under image on browser resize - html

Question

I don't understand why the text is going under the image before flex wrap comes into play. I know it's probably something simple but I just can't figure it out.. I have put widths on both sides of the page, but they seem to be ignored when it comes to resizing, and the text goes almost completely behind the image before flex wrap drops it below (I want the image to be on top when that happens but I'll cross that bridge when I come to it, assuming I'll use a reverse property in flex). Anyway, not sure what is going on, and apologies for the probable mess of HTML and CSS.
Thanks
<div class="layout">
<div class="left-sect">
<img class="logo" src="./images/logo.svg" alt="site logo" />
<div class="l-content">
<h1 class="s-head">We're</h1>
<h1>
Coming <br />
Soon
</h1>
<p>
Hello fellow shoppers! We're currently building our new fashion
store. Add your email below to stay up-to-date with announcements
and our launch deals.
</p>
<input type="email" class="main-form" />
<button type="submit">
<img src="./images/icon-arrow.svg" alt="form button arrow" />
</button>
</div>
</div>
<div class="right-sect">
<img class="main-img" src="./images/hero-desktop.jpg" alt="" />
</div>
</div>
</body>
CSS
:root {
--ds-red: hsl(0, 36%, 70%);
--soft-red: hsl(0, 93%, 68%);
--dg-red: hsl(0, 6%, 24%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
font-family: "Josefin Sans", sans-serif;
background-image: url(./images/bg-pattern-desktop.svg);
background-size: cover;
background-position: center;
}
.layout {
display: flex;
flex-direction: row;
/* flex-wrap: wrap; */
}
.left-sect {
padding: 4rem 10rem;
background-image: url(./images/bg-pattern-desktop.svg);
background-size: cover;
background-position: center;
width: 60%;
}
.l-content {
margin-top: 7rem;
}
.main-img {
}
.s-head {
color: var(--ds-red);
font-weight: 300;
text-transform: uppercase;
font-size: 4rem;
letter-spacing: 1.2rem;
}
h1 {
font-size: 4rem;
letter-spacing: 1.2rem;
text-transform: uppercase;
color: var(--dg-red);
font-weight: 400;
}
p {
color: var(--ds-red);
text-emphasis: left;
width: 30rem;
line-height: 1.3rem;
margin-top: 1.5rem;
}

Answer 1

You sould add media queries.
:root {
--ds-red: hsl(0, 36%, 70%);
--soft-red: hsl(0, 93%, 68%);
--dg-red: hsl(0, 6%, 24%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
font-family: "Josefin Sans", sans-serif;
background-size: cover;
background-position: center;
}
.layout {
display: flex;
}
.left-sect {
padding: 4rem 10rem;
background-image: url(./images/bg-pattern-desktop.svg);
background-size: cover;
background-position: center;
width: 60%;
}
.l-content {
margin-top: 7rem;
}
.main-img {
}
.s-head {
color: var(--ds-red);
font-weight: 300;
text-transform: uppercase;
font-size: 4rem;
letter-spacing: 1.2rem;
}
h1 {
font-size: 4rem;
letter-spacing: 1.2rem;
text-transform: uppercase;
color: var(--dg-red);
font-weight: 400;
}
p {
color: var(--ds-red);
text-emphasis: left;
width: 30rem;
line-height: 1.3rem;
margin-top: 1.5rem;
}
#media screen and (max-width:1070px){/* <== You sould change this to what you want.*/
html .layout{
flex-direction:column;
}
#media screen and(min-width:1017px){ /* <== You sould change this to what you want.*/
html .layout{
flex-direction:row;
}
}
<div class="layout">
<div class="left-sect">
<img class="logo" src="https://image.shutterstock.com/image-vector/dots-letter-c-logo-design-260nw-551769190.jpg" alt="site logo" />
<div class="l-content">
<h1 class="s-head">We're</h1>
<h1>
Coming <br />
Soon
</h1>
<p>
Hello fellow shoppers! We're currently building our new fashion
store. Add your email below to stay up-to-date with announcements
and our launch deals.
</p>
<input type="email" class="main-form" />
<button type="submit">
<img src="./images/icon-arrow.svg" alt="form button arrow" />
</button>
</div>
</div>
<div class="right-sect">
<img class="main-img" src="https://image.shutterstock.com/image-vector/dots-letter-c-logo-design-260nw-551769190.jpg" alt="" />
</div>