skip to Main Content

So here is my entire code of webpage and the problem I am facing is that when I run the program it works fine but I want to make it responsive, where I am stuck in a problem.

HTML ——————————————————————————
`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Shopper</title>
    <link rel="stylesheet" href="styles.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <header class="header" id="header">
        <nav class="nav__container">
            <a href="index.html" class="nav__logo">
                <i class="bx bxs-shopping-bags nav__logo-icon"></i> e-shopper
            </a>

            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list" style="list-style-type: none;">
                    <li class="nav__item">
                        <a href="index.html" class="nav__link active">Home</a>
                    </li>

                    <li class="nav__item">
                        <a href="shop.html" class="nav__link">Shop</a>
                    </li>

                    <li class="nav__item">
                        <a href="blog.html" class="nav__link">Blog</a>
                    </li>

                    <li class="nav__item">
                        <a href="about.html" class="nav__link">About</a>
                    </li>

                    <li class="nav__item">
                        <a href="contact.html" class="nav__link">Contact</a>
                    </li>
                </ul>
            </div>

            <div class="nav__btns">
                <div class="nav__shop" id="cart-shop">
                    <i class="bx bx-shopping-bag"></i>
                </div>
                <div class="login__toggle" id="login-toggle">
                    <i class="bx bx-user"></i>
                </div>
            </div>
        </nav>
    </header>
    
    <div class="hero__container">
        <div id="hero">
            <img src="./images/hero4.png" alt="hero image">
            <div id="hero__content">
                <p>Trade-In-Offer</p>
                <h1>Super value deals</h1>
                <h1>On all products</h1>
                <p>Save more with coupons & upto 70% off!</p>
                <button id="hero__content__btn">
                    <img src="./images/button.png" alt="button image">
                    <span>Shop Now</span>
                </button>
            </div>
        </div>
    </div>

    <div id="features">
        <div class="features__img">
            <img src="./images/features/f1.png" alt="free shipping image">
            <span>Free Shipping</span>
        </div>
        <div class="features__img">
            <img src="./images/features/f2.png" alt="online order image">
            <span>Online Order</span>
        </div>
        <div class="features__img">
            <img src="./images/features/f3.png" alt="save money image">
            <span>Save Money</span>
        </div>
        <div class="features__img">
            <img src="./images/features/f4.png" alt="promotions image">
            <span>Promotions</span>
        </div>
        <div class="features__img">
            <img src="./images/features/f5.png" alt="sell image">
            <span>Happy Sells</span>
        </div>
        <div class="features__img">
            <img src="./images/features/f6.png" alt="24/7 support image">
            <span>24/7 Support</span>
        </div>
    </div>

    <div id="featured__products">
        <h1>Featured Products</h1>
        <p>Summer collection new modern design</p>

        <div id="featured__products__cards">
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/f1.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/f2.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/f3.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/f4.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/f5.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/f6.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/f7.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/f8.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
        </div>
    </div>

    <div id="cta__banner">
        <img src="./images/banner/b2.jpg" alt="cta banner img">

        <div id="cta__banner__content">
            <p>Repair Services</p>
            <h1>Up to <span>70% Off</span> - All t-Shirts & Accessories</h1>
            <button>Explore More</button>
        </div>
    </div>

    <div id="featured__products">
        <h1>New Arrivals</h1>
        <p>Summer collection new modern design</p>

        <div id="featured__products__cards">
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/n1.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/n2.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/n3.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/n4.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/n5.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/n6.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/n7.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
            <div class="featured__products__cards">
                <div class="products__img__container">
                    <img src="./images/products/n8.jpg" alt="1st__product">
                </div>

                <div class="featured__products__details">
                    <span>adidas</span>
                    <span>Cartoon Astronaut T-Shirts</span>
                    <span>⭐⭐⭐⭐</span>
                    <span>78$</span>
                    <span><i class='bx bxs-cart-download'></i></span>
                </div>
            </div>
        </div>
    </div>

    <div id="cta__banner__2">
        <div id="banner__1">
            <img src="./images/banner/b17.jpg" alt="1st cta banner">
            <div class="cta__banner__content__2">
                <p>crazy deals</p>
                <h1>buy 1 get 1 free</h1>
                <p>The best classic dress is on sale at e-shopper</p>
                <button>Learn More</button>
            </div>
        </div>
        <div id="banner__2">
            <img src="./images/banner/b10.jpg" alt="2nd cta banner">
            <div class="cta__banner__content__2">
                <p>spring/summer</p>
                <h1>upcomming season</h1>
                <p>The best classic dress is on sale at e-shopper</p>
                <button>Collection</button>
            </div>
        </div>
    </div>

    <div id="text__banner">
        <div class="text__banners">
            <img src="./images/banner/b7.jpg" alt="text banner img">
            <div class="text__banner__content">
                <h2>SEASONAL SALE</h2>
                <h3>Winter Collection - 50% Off</h3>
            </div>
        </div>
        <div class="text__banners">
            <img src="./images/banner/b4.jpg" alt="text banner img">
            <div class="text__banner__content">
                <h2>NEW FOOTWEAR COLLECTION</h2>
                <h3>Spring/Summer 2022</h3>
            </div>
        </div>
        <div class="text__banners">
            <img src="./images/banner/b18.jpg" alt="text banner img">
            <div class="text__banner__content">
                <h2>T-SHIRTS</h2>
                <h3>New Trendy Prints</h3>
            </div>
        </div>
    </div>

    <div id="newsletter">
        <div id="newsletter__content">
            <p>Sign Up For Newsletters</p>
            <p>Get E-mail updates about our latest shop and <span>special offers.</span></p>
        </div>
        <div id="newsletter__email">
            <input type="text" placeholder="Your email address">
            <button>Sign Up</button>
        </div>
    </div>

    <footer id="footer">
        <div id="footer__contact">
            <i class="bx bxs-shopping-bags nav__logo-icon"></i><span>e-shopper</span>
            <h4>Contact</h4>
            <p><strong>Address:</strong>Welington Road, Street 32, San Francisco</p>
            <p><strong>Phone:</strong>+01 2222 365</p>
            <p><strong>Hours:</strong>10:00 - 18:00, Mon - Sat</p>
            <h4>Follow Us</h4>
            <i class='bx bxl-facebook'></i>
            <i class='bx bxl-twitter' ></i>
            <i class='bx bxl-instagram' ></i>
            <i class='bx bxl-youtube' ></i>
        </div>
        <div id="footer__about">
            <h4>About</h4>
            <p>About Us</p>
            <p>Delivery Information</p>
            <p>Privacy Policy</p>
            <p>Terms & Conditions</p>
            <p>Contact Us</p>
        </div>
        <div id="footer__account">
            <h4>My Account</h4>
            <p>Sign In</p>
            <p>View Cart</p>
            <p>My Wishlist</p>
            <p>Track My Order</p>
            <p>Help</p>
        </div>
        <div id="footer__app">
            <h4>Install App</h4>
            <p>From App Store or Google Play</p>
            <img src="./images/pay/app.jpg" alt="app store">
            <img src="./images/pay/play.jpg" alt="play store">
            <p>Secured Payment Gateways</p>
            <img src="./images/pay/pay.png" alt="payment methods">
        </div>
        <p id="footer__copyright">©️ 2024 Samuel Lakra - HTML CSS JavaScript E-Commerce Project</p>
    </footer>
    <script src="index.js"></script>
</body> 
</html>

CSS———————————————————————————–

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Home Page */
body{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.container{
    max-width: 968px;
    margin-left: auto;
    margin-right: auto;
}

#header{
    background-color: antiquewhite;
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
}

.nav__container{
    display: flex;
}

.nav__list{
    margin-left: 3rem;
    display: flex;
    justify-content: space-between;
    width: 31rem;
}

.nav__link {
    color: black;
    text-decoration: none;
    position: relative;
}

.nav__link::after{
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 1px;
    right: 0;
    background: black;
    transition: 0.3s ease;
}

.nav__link:hover{
    color: red;
}

.nav__link.active::after{
    text-decoration: underline;
    width: 100%;
    left: 0;
    background: black;
}

.nav__logo{
    margin-top: 0.9rem;
    width: 10rem;
    margin-left: 11rem;
    color: red;
    text-decoration: none;
}

.nav__btns{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 15rem;
    margin-left: 15rem;
    cursor: pointer;
}

.nav__btns i:hover{
    color: rgb(255, 0, 0);
}

.hero-container {
    margin-top: 3rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#hero {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

#hero img{
    position: relative;
    height: 46rem;
    width: 100%;
}

#hero__content{
    position: absolute;
    top: 15rem;
    left: 10rem;
}
#hero__content__btn{
    border: none;
    background-color: transparent;
    cursor: pointer;
}

#hero__content__btn:hover img{
    transform: scale(1.1);
}

#hero__content__btn:hover span{
    transform: scale(1.1);
}

#hero__content__btn img{
    width: 10rem;
    height: 2.8rem;
    position: relative;
}

#hero__content__btn span{
    position: absolute;
    left: 3.5rem;
    bottom: 1.5rem;
    color: rgb(0, 121, 121);
    font-weight: bold;
}

#hero__content p:nth-of-type(1){
    font-weight: bold;
}

#hero__content p:nth-of-type(2){
    color: rgb(177, 177, 177);
}

#hero__content h1:nth-of-type(2){
    color: rgb(0, 121, 121);
}

#hero__content h1{
    font-size: 2.7rem;
    margin: 0;
}

#features{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 2rem;
}

.features__img{
    height: 11rem;
    width: 11rem;
    border: 1px solid rgb(222, 222, 222);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.features__img span{
    margin-top: 1.3rem;
    padding: 5px;
    font-size: small;
    font-weight: bold;
    color: rgb(0, 121, 121);
    border-radius: 5px;
}

#features .features__img:nth-of-type(1) span{
    background-color: rgb(252, 195, 204);
}

#features .features__img:nth-of-type(2) span{
    background-color: rgb(162, 255, 175);
}

#features .features__img:nth-of-type(3) span{
    background-color: rgb(163, 220, 251);
}

#features .features__img:nth-of-type(4) span{
    background-color: rgb(204, 174, 255);
}

#features .features__img:nth-of-type(5) span{
    background-color: rgb(255, 194, 251);
}

#features .features__img:nth-of-type(6) span{
    background-color: rgb(255, 229, 173);
}

#featured__products{
    display: flex;
    flex-direction: column;
    margin-top: 4rem;
    align-items: center;
}

#featured__products h1{
    font-size: 3rem;
    margin-bottom: 0;
}

#featured__products p{
    margin: 0;
    padding: 0;
    color: rgb(177, 177, 177);
}

#featured__products__cards{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 3rem;
    column-gap: 4rem;
    width: 100vw;
    height: 68rem;
    padding: 5rem;
    box-sizing: border-box
}
.featured__products__cards{
    width: 100%;
    border-radius: 20px;
    padding: 10px;
    border: 1px solid rgb(208, 208, 208);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.featured__products__cards:hover{
    box-shadow: 1px 1px 1px 1px rgb(154, 154, 154);
    transform: scale(1.02);
}

.products__img__container{
    border-radius: 20px;
}

.featured__products__cards img{
    width: 100%;
    border-radius: 20px;
}

.featured__products__details{
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
}

.featured__products__details span:nth-of-type(1){
    font-size: 11px;
    color: rgb(150, 156, 156);
}

.featured__products__details span:nth-of-type(2){
    font-weight: bold;
}

.featured__products__details span:nth-of-type(4){
    color: rgb(0, 187, 125);
}

.featured__products__details span:nth-of-type(5){
    position: absolute;
    top: 4.3rem;
    right: 0;
    border-radius: 0 0 12px 0;
    height: 2.5rem;
    width: 2.5rem;
    background-color: rgb(192, 255, 234);
    transition: 0.3s ease;
}

.featured__products__details span:nth-of-type(5):hover{
    background-color: rgb(121, 255, 210);
}

.featured__products__details span:nth-of-type(5) i{
    font-size: 2rem;
    height: auto;
    width: auto;
}

#cta__banner{
    width: 100%;
    margin-top: 2rem;
    position: relative;
    top: 0;
}

#cta__banner img{
    width: 100%;
    height: 18rem;
}

#cta__banner__content{
    position: absolute;
    top: 4rem;
    left: 28rem;
    margin: 0;
}

#cta__banner__content p{
    margin-top: 0;
    margin-left: 17rem;
    padding: 0;
    color: white;
}

#cta__banner__content h1{
    color: white;
}

#cta__banner__content span{
    color: red;
}

#cta__banner__content button{
    margin-left: 17rem;
    border-radius: 4px;
    border: none;
    height: 2.5rem;
    width: 8rem;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
}

#cta__banner__content button:hover{
    background-color: rgb(0, 167, 112);
    color: black;
}

#cta__banner__2{
    display: flex;
    flex-direction: row;
    gap: 2rem;
    padding-left: 4.5rem;

}

#banner__1{
    position: relative;
    top: 0;
}

#banner__2{
    position: relative;
    top: 0;
}

#banner__1 img{
    width: 42.8rem;
}

#banner__2 img{
    width: 42.3rem;
    height: 23.6rem;
}

.cta__banner__content__2{
    position: absolute;
    left: 3rem;
    top: 6rem;
}

.cta__banner__content__2 p{
    color: white;
}

.cta__banner__content__2 p:nth-of-type(2){
    margin-top: 0;
    font-size: 0.8rem;
}

.cta__banner__content__2 h1{
    color: white;
}

.cta__banner__content__2 button{
    height: 2.3rem;
    width: 6rem;
    border: white 1px solid;
    background-color: transparent;
    cursor: pointer;
    color: white;
    font-size: 13px;
    font-weight: bold;
    transition: 0.3s ease;
}

#banner__1:hover .cta__banner__content__2 button{
    background-color: rgb(0, 121, 121);
    border: none;
}

#banner__2:hover .cta__banner__content__2 button{
    background-color: rgb(0, 121, 121);
    border: none;
}

#text__banner{
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    column-gap: 2rem;
    margin-top: 2.5rem;
    padding-left: 4.4rem;
    padding-right: 3.4rem;
}

.text__banners{
    height: 15rem;
    position: relative;
    top: 0;
}

.text__banners img {
    width: 100%;
    height: 100%;
}

.text__banner__content{
    position: absolute;
    top: 4rem;
    left: 2rem;
}

.text__banner__content h2{
    color: white;
}

.text__banner__content h3{
    color: rgb(255, 50, 50);
}

#newsletter{
    background-color: rgb(0, 0, 65);
    height: 9rem;
    margin-top: 3rem;
    padding-left: 4.4rem;
    padding-right: 3.4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#newsletter__content p:nth-of-type(1){
    color: white;
    font-weight: bold;
    font-size: 1.4rem;
}

#newsletter__content p:nth-of-type(2){
    color: rgb(127, 127, 127);
    font-size: 0.9rem;
}

#newsletter__content p span{
    color: orange;
}

#newsletter__email{
    display: flex;
    align-items: center;
}

#newsletter__email input{
   height: 2.3rem;
   width: 25rem;
   border-radius: 5px 0 0 5px;
   border: none;
}

#newsletter__email button{
    height: 2.5rem;
    width: 6.5rem;
    cursor: pointer;
    color: white;
    background-color: rgb(0, 121, 121);
    border: none;
    border-radius: 0 5px 5px 0;
}

#footer{
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-left: 4.4rem;
    gap: 11rem;
    position: relative;
    top: 0;
}

#footer__copyright{
    position: absolute;
    top: 18rem;
    left: 34rem;
}

#footer__contact{
    margin-top: 1.4rem;
}

#footer__contact i:nth-of-type(1){
    color: red;
    height: 1rem;
    width: 1rem;
}

#footer__contact span{
    color: red;
}

#footer p{
    font-size: 12px;
    color: rgb(151, 151, 151);
}

#footer p strong{
    color: black;
}

#footer__contact i:nth-of-type(2){
    cursor: pointer;
}

#footer__contact i:nth-of-type(3){
    cursor: pointer;
}

#footer__contact i:nth-of-type(4){
    cursor: pointer;
}

#footer__contact i:nth-of-type(5){
    cursor: pointer;
}

#footer__about p{
    cursor: pointer;
}

#footer__account p{
    cursor: pointer;
}

#footer__app img:nth-of-type(1){
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid rgb(0, 121, 121);
}

#footer__app img:nth-of-type(2){
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid rgb(0, 121, 121);
}

#footer__app img:nth-of-type(3){
    cursor: pointer;
}

/* Media Query */
@media (max-width:799px){
    body {
        width: 100%;
        height: 100%;
    }

    #header{
        height: 5rem;
    }

    .nav__logo {
        width: 12rem;
        font-size: 1.8rem;
        margin-left: 5rem;
    }

    .nav__list{
        font-size: 1.4rem;
    }

    .nav__list li{
        margin-bottom: 3rem;
    }

    .nav__btns{
        width: 10rem;
        margin-left: 0;
        margin-bottom: 3rem;
        margin-left: 2rem;
        font-size: 1.7rem;
    }

    .hero-container{
        width: 100%;
    }

    #hero{
        margin-top: 5rem;
        width: 100rem !important;
        max-width: 100% !important;
        box-sizing: border-box;
        height: 80rem;
    }

    #hero img{
        width: 100% !important;
        height: 100% !important;
    }
}

JavaScript————————————————————————-

//Active nav__link function
const navLinks = document.querySelectorAll(".nav__link");

navLinks.forEach(link => {
    link.addEventListener('click', function(event){
        event.preventDefault();
        navLinks.forEach(link => link.classList.remove("active"));
        event.target.classList.add("active");
    });
});

when put in responsive mode for tablet devices the html and body are not taking entire screen which I think is causing the elements inside to shrink as well. I am only able to increase the height of elements and not able to increase the width. Here are screenshots of
how I want it to look enter image description here
vs
how it’s looking for me enter image description here
I am just not able to increase the width of image and lot of other things as well, there must be some mistake i might have which i am not able to find or fix, ChatGPT didn’t help either so any kind of help is appreciated.

2

Answers


  1. Your problem is, you’ve specified a fixed height for the image in the #hero img selector. So the image will get thinner on smaller screens, but is going to retain the height, thus getting stretched.

    Login or Signup to reply.
  2. Try setting container class max width to 100% for tablets:

    @media (max-width:799px){
       .container{
           max-width: 100%;
       }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search