Currently, I am in the process of creating a responsive hero section where I aim to maintain the image at full size until the window width reaches below 1300px. However, I have observed that the image starts to shrink much earlier than expected, and I am uncertain as to why this behavior is occurring.
Below are snippets of my HTML and CSS code:
/* *************** */
/* HERO-SECTION */
/* *************** */
.hero {
max-width: 130rem;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-content: center;
column-gap: 9.6rem;
}
.hero h1 {
font-size: 5.2rem;
font-weight: 700;
margin-bottom: 3.2rem;
line-height: 1;
letter-spacing: -1px;
}
(hero p {
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 4.8rem;
line-height: 1.5;
}
.btn:link,
.btn:visited {
font-size: 2rem;
padding: 1.2rem 3.2rem;
text-decoration: none;
display: inline-block;
background-color: #e67e22;
color: white;
border-radius: 1.5rem;
font-weight: 500;
transition: all 0.3s;
}
.left:hover,
.left:active {
background-color: #cf711f;
}
.right:link,
.right:visited {
background-color: white;
color: #333;
margin-left: 2.4rem;
}
.right:hover,
.right:active {
background-color: #fdf2e9;
color: #333;
box-shadow: 0 0 0 3px white;
}
.hero-section {
background-color: #fdf2e9;
padding: 16rem 32rem;
}
.head-img {
width: 100%;
}
.deliver-ithems {
display: flex;
align-items: center;
margin-top: 8rem;
gap: 1.6rem;
}
.deliver-imgs {
display: flex;
}
deliver-imgs img {
height: 4.8rem;
width: 4.8rem;
border-radius: 50%;
border: #fff solid 2px;
margin-left: -1.6rem;
}
.deliver-imgs img:first-child {
margin: 0;
}
.deliver-text {
font-size: 1.8rem;
font-weight: 600;
}
.deliver-ithems span {
color: #cf711f;
}<header class="hero-section">
<div id="hero">
<div class="head-text">
<div class="text-section">
<h1>
A healthy meal delivered to your door every single day
</h1>
<p>
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs.
</p>
<a href="#" class="btn left">Start eating well</a>
<a href="#" class="btn right">Learn more ↓</a>
<div class="deliver-ithems">
<div class="deliver-imgs">
<img src="img/customers/customer-1.jpg" alt="customer" />
<img src="img/customers/customer-2.jpg" alt="customer" />
<img src="img/customers/customer-3.jpg" alt="customer" />
<img src="img/customers/customer-4.jpg" alt="customer" />
<img src="img/customers/customer-5.jpg" alt="customer" />
<img src="img/customers/customer-6.jpg" alt="customer" />
</div>
<div class="deliver-text">
<span>250,000+</span> meals delivered last year
</div>
</div>
</div>
</div>
<div class="img-hero">
<img src="hero.png" alt="three images" class="head-img" />
</div>
</div>
</header>I have tested with standard widths, but the issue persists. I believe I have followed best practices, yet the desired result eludes me.