skip to Main Content

The header and footer works fine in laptop screen. But when I turn on responsive screen and test it in different width, the header and footer both decreases in width. What I want is that when I reduce the width of the screen the header and footer should still take 100% width of the screen like it is supposed to.

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    background-color: aqua;
    margin-top: 0.5rem;
}

.left {
    line-height: 0.8;
    display: grid;
    grid-column: 1;
    justify-content: center;
    margin-right: 4rem;
    font-family: "Shadows Into Light", cursive;
    font-style: normal;
    cursor: none;
}

.left-title {
    margin: 0;
    text-align: center;
    padding: 0;
    font-size:2rem;
    text-decoration: underline;
    text-decoration-color: #3C4242;
    font-weight: 600;
}

.middle {
    display: flex;
    flex-direction: row;
    margin-right: 5rem;
}

.link {
    margin-left: 5rem;
    text-decoration: none;
    color: #3C4242;
    font-size: large;
}

.link:hover{
    color: #0d0d0d;
}

.right {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 3rem;
}

.person {
    cursor: pointer;
    margin:0 1rem 0 1rem
}

.cart {
    cursor: pointer;
}

.footer{
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: #3C4242;
    color: #F6F6F6;
    width: 100% !important;
}

.info {
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.info > div > p{
    cursor: pointer;
}

.icons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.social {
    padding-top: 1.5rem;
    align-content: center;
}

.icons > div > span {
    height: 1.5rem;
    width: 5rem;
}

.download > h1 {
    line-height: 0.5;
}

.copyright {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mystyle.css">
    <title>Document</title>
</head>
<body>
    <header class="header">
        <div class='left'>
            <p class='left-title'>
                test Store
            </p>
        </div>
        <div class='middle'>
            <a class="link" href="/">Shop</a>
            <a class="link" href="/">Men</a>
            <a class="link" href="/">Women</a>
            <a class="link" href="/">Combos</a>
        </div>
        <div class='right'>
            <span>search</span>
            <span class="cart">cart</span>
            <span class="person">person</span>
        </div>
    </header>
    <main>test page</main>
    <footer class="footer">
        <div class='info'>
            <div>
              <h1>Need Help</h1>
              <p>Contact Us</p>
              <p>Track Order</p>
              <p>FAQ's</p>
              <p>Career</p>
            </div>
            <div>
              <h1>Company</h1>
              <p>About Us</p>
              <p>Euphoria Blog</p>
              <p>Collaboration</p>
              <p>Media</p>
            </div>
            <div>
              <h1>More Info</h1>
              <p>Terms and Conditions</p>
              <p>Privacy Policy</p>
              <p>Shipping Policy</p>
            </div>
            <div>
              <h1>Location</h1>
              <h5>[email protected]</h5>
              <h5>Banani, Dhaka, Bangladesh</h5>
            </div>
          </div>
          
          <div class='icons'>
            <div className='social'>
              <span>icon</span>
              <span>icon</span>
              <span>icon</span>
            </div>
            <div class='download'>
              <h1>Download The App</h1>
              <span>icon</span>
              <span>icon</span>
            </div>
          </div>
          <div class='copyright'><span>Copyright © 2024 Euphoria Ltd. All rights reserved</span></div>
    </footer>
</body>
</html>

I tried using media query but it is not working

4

Answers


  1. You design is breaking. Giving 100% width won’t make it responsive. For your page decrease the spacers https://prnt.sc/UyN1FUt7V6zD and create hamburger menu for smaller screens.

    Login or Signup to reply.
  2. The issue occurs because the header is overflowing. To fix this, you just need to add the overflow: hidden property to both the header and footer. but don’t forget to make the header responsive for mobile sizes 🙂 .

    overflow: hidden; /* Added to ensure content is contained */
    
    body{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .header {
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: center;
        justify-content: space-evenly;
        background-color: aqua;
        margin-top: 0.5rem;
        overflow: hidden; /* Added to ensure content is contained */
    
    }
    
    .left {
        line-height: 0.8;
        display: grid;
        grid-column: 1;
        justify-content: center;
        margin-right: 4rem;
        font-family: "Shadows Into Light", cursive;
        font-style: normal;
        cursor: none;
    }
    
    .left-title {
        margin: 0;
        text-align: center;
        padding: 0;
        font-size:2rem;
        text-decoration: underline;
        text-decoration-color: #3C4242;
        font-weight: 600;
    }
    
    .middle {
        display: flex;
        flex-direction: row;
        margin-right: 5rem;
    }
    
    .link {
        margin-left: 5rem;
        text-decoration: none;
        color: #3C4242;
        font-size: large;
    }
    
    .link:hover{
        color: #0d0d0d;
    }
    
    .right {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 3rem;
    }
    
    .person {
        cursor: pointer;
        margin:0 1rem 0 1rem
    }
    
    .cart {
        cursor: pointer;
    }
    
    .footer{
        display: flex;
        width: 100%;
        flex-direction: column;
        background-color: #3C4242;
        color: #F6F6F6;
        width: 100% !important;
        overflow: hidden; /* Added to ensure content is contained */
    }
    
    .info {
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    
    .info > div > p{
        cursor: pointer;
    }
    
    .icons {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }
    
    .social {
        padding-top: 1.5rem;
        align-content: center;
    }
    
    .icons > div > span {
        height: 1.5rem;
        width: 5rem;
    }
    
    .download > h1 {
        line-height: 0.5;
    }
    
    .copyright {
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 3rem;
    } 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="mystyle.css">
        <title>Document</title>
    </head>
    <body>
        <header class="header">
            <div class='left'>
                <p class='left-title'>
                    test Store
                </p>
            </div>
            <div class='middle'>
                <a class="link" href="/">Shop</a>
                <a class="link" href="/">Men</a>
                <a class="link" href="/">Women</a>
                <a class="link" href="/">Combos</a>
            </div>
            <div class='right'>
                <span>search</span>
                <span class="cart">cart</span>
                <span class="person">person</span>
            </div>
        </header>
        <main>test page</main>
        <footer class="footer">
            <div class='info'>
                <div>
                  <h1>Need Help</h1>
                  <p>Contact Us</p>
                  <p>Track Order</p>
                  <p>FAQ's</p>
                  <p>Career</p>
                </div>
                <div>
                  <h1>Company</h1>
                  <p>About Us</p>
                  <p>Euphoria Blog</p>
                  <p>Collaboration</p>
                  <p>Media</p>
                </div>
                <div>
                  <h1>More Info</h1>
                  <p>Terms and Conditions</p>
                  <p>Privacy Policy</p>
                  <p>Shipping Policy</p>
                </div>
                <div>
                  <h1>Location</h1>
                  <h5>[email protected]</h5>
                  <h5>Banani, Dhaka, Bangladesh</h5>
                </div>
              </div>
              
              <div class='icons'>
                <div className='social'>
                  <span>icon</span>
                  <span>icon</span>
                  <span>icon</span>
                </div>
                <div class='download'>
                  <h1>Download The App</h1>
                  <span>icon</span>
                  <span>icon</span>
                </div>
              </div>
              <div class='copyright'><span>Copyright © 2024 Euphoria Ltd. All rights reserved</span></div>
        </footer>
    </body>
    </html>
    Login or Signup to reply.
  3. The contents in your header section is overflowing.
    since you are using flexbox. a simple way to avoid this problem is by using

    flex-wrap: wrap;
    for all the overflowing div’s. but this is not ideal solution. you are better to use hamburger menu for smaller screens.

    Login or Signup to reply.
  4. To solve this problem you can set a fixed min-width to your HTML and body

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        min-width: 50rem;
        height: 100%;
        box-sizing: border-box;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search