Check out the code snippet below:
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: hsl(233, 47%, 7%);
font-size: 15px;
}
h1 {
color: hsl(0, 0%, 100%);
font-family: "Inter", "sans-serif";
line-height: 1.5;
margin-top: 2rem;
}
p {
color: hsla(0, 0%, 100%, 0.75);
font-family: "Lexend Deca", "sans-serif";
}
#card {
max-width: 400px;
background: hsl(244, 38%, 16%);
margin: 6rem auto;
border-radius: 15px;
}
#image {
background: url("https://xaviour1504.github.io/stats-preview-card/images/image-header-mobile.jpg");
width: 100%;
height: 300px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.overlay {
width: 100%;
height: 100%;
background: hsl(277, 64%, 61%);
opacity: 0.5;
position: absolute;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#content {
text-align: center;
margin: 5rem 2rem;
}
#para {
line-height: 1.5;
margin: 2rem;
}
/* media queries */
@media (min-width: 600px) {
#card {
display: flex;
max-width: 1200px;
flex-direction: row-reverse;
height: 400px;
margin: 10rem auto;
}
#content {
margin: 40px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}
#image {
height: 400px;
max-width: 600px;
border-bottom-right-radius: 15px;
border-top-left-radius: 0px;
}
.overlay {
border-bottom-right-radius: 15px;
border-top-left-radius: 0;
}
.stats {
display: flex;
gap: 5rem;
margin: 0 auto;
}
p {
margin-bottom: 30px;
}
#heading {
margin-left: 27px;
}
#para {
margin-top: 20px;
}
}<body>
<div id="card">
<div id="image">
<div class="overlay"></div>
</div>
<div id="content">
<h1 id="heading">
Get <span style="color: hsl(277, 64%, 61%)">insights</span> that help your business grow.
</h1>
<p id="para">
Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.
</p>
<div class="stats">
<div class="box1">
<h1>10k+</h1>
<p>COMPANIES</p>
</div>
<div class="box2">
<h1>314</h1>
<p>TEMPELATES</p>
</div>
<div class="box3">
<h1>12M+</h1>
<p>QUERIES</p>
</div>
</div>
</div>
</div>
</body>Why does the content div take full width and the image div shrink when I resize my screen to a smaller size? It should divide into equal space but it's not happening.