Html - Problem with responsiveness of a e-commerce webpage

Ignix
August 1, 2024
169 views
0 votes
2 Answers

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.

Answers

- MartinBean
- August 1, 2024 at 5:31 pm
- 0 votes
0
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.

- VicenteC
- August 1, 2024 at 5:32 pm
- 0 votes
0
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.

Click here to cancel reply.

Html – Problem with responsiveness of a e-commerce webpage

Answers