I’ve created a website but I’m having trouble making it responsive. Specifically, the site doesn’t adjust properly below 800px. I’ve tried various methods but haven’t had any success. Can someone guide me on what might be wrong? Here is the relevant code:
<code> <section class="bannerSection">
<div id="bannerWithText">
<h2>Trade-in deal</h2>
<h1>Incredible Value Discounts on Every Product</h1>
<span id="element"></span>
<div><button style="font-size: 20px;">Shop Now</button></div>
</div>
</section>
.bannerSection {
display: flex;
box-sizing: border-box;
place-content: center;
pointer-events: none;
transition: 500ms ease-in-out;
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
height: auto;
}
.bannerSection::before {
width: 100%;
height: 100%;
background: url(../imgaes/Eshop Brand.png) no-repeat center center;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover; /* Use cover to ensure the image covers the section */
z-index: -1;
overflow: hidden;
background-position: center;
flex-wrap: wrap;
}
</code>
<code> <section class="bannerSection">
<div id="bannerWithText">
<h2>Trade-in deal</h2>
<h1>Incredible Value Discounts on Every Product</h1>
<span id="element"></span>
<div><button style="font-size: 20px;">Shop Now</button></div>
</div>
</section>
.bannerSection {
display: flex;
box-sizing: border-box;
place-content: center;
pointer-events: none;
transition: 500ms ease-in-out;
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
height: auto;
}
.bannerSection::before {
width: 100%;
height: 100%;
background: url(../imgaes/Eshop Brand.png) no-repeat center center;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover; /* Use cover to ensure the image covers the section */
z-index: -1;
overflow: hidden;
background-position: center;
flex-wrap: wrap;
}
</code>
<section class="bannerSection">
<div id="bannerWithText">
<h2>Trade-in deal</h2>
<h1>Incredible Value Discounts on Every Product</h1>
<span id="element"></span>
<div><button style="font-size: 20px;">Shop Now</button></div>
</div>
</section>
.bannerSection {
display: flex;
box-sizing: border-box;
place-content: center;
pointer-events: none;
transition: 500ms ease-in-out;
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
height: auto;
}
.bannerSection::before {
width: 100%;
height: 100%;
background: url(../imgaes/Eshop Brand.png) no-repeat center center;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover; /* Use cover to ensure the image covers the section */
z-index: -1;
overflow: hidden;
background-position: center;
flex-wrap: wrap;
}
New contributor
Maliha Habib is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1