The header and footer are not extending across the entire width of the page

While testing on a responsive screen, I noticed that the header and footer both decrease in width instead of maintaining 100% width as intended. The issue only occurs when I reduce the width of the screen.

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><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acdfd9dcdcc3ded8ecc9d9dcc4c3dec5cd82cfc3c1">[email protected]</a></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 have attempted using media queries but have not been successful in resolving the issue.

htmlcssheaderfooter

Answer №1

The issue we're facing stems from the header overflowing. The solution is simple - just include the flex-wrap: wrap; property in both the header and footer CSS. Remember to ensure that the header remains responsive for mobile display 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;
    flex-wrap: wrap; /* 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><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31424441415e434571544441595e4358501f525e5c">[email protected]</a></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>

Answer №2

Your header section is experiencing overflow due to the use of flexbox layout. To address this issue, one possible solution is to apply flex-wrap: wrap; to all overflowing divs. However, a more effective approach would be to implement a hamburger menu for smaller screens.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to adjust the size of a DIV with a button click in Vue3

I am having trouble resizing a DIV block in Vue3. Whenever I click the button, I receive an error message saying "Cannot read properties of undefined (reading 'style')". I know there is an issue with the JS part of the code, but I'm not sure ...

javascripthtmlcssvuejs3

How can I retrieve text within a p tag using xpath and xpath axes?

<div class="details"> <p><b>Compatibility:</b> All versions</p> <p><b>Category:</b> Entertainment</p> <p><b>Updated:</b> Apr 2, 2014</p> <p><b>Version ...

htmlxpath

What are the steps for encoding a value using jquery serialize?

I attempted to encode all values using the following code: encodeURIComponent($("#customer_details").serialize()); Unfortunately, it did not produce the desired results. Is there a method to retrieve all elements on a form and individually encode each v ...

javascriptjqueryhtml

What is the best way to design lists that adjust to different screen sizes by incorporating multiple columns within the available width?

Back in my old fixed-width days, I had a clever method of distributing data across three columns by dividing the number of elements by three. It worked pretty efficiently. Now in this modern responsive world, my current solution involves splitting data in ...

htmlcssresponsive-designtwitter-bootstrap-3

HTML allows for the creation of multiple pages within a single file

How can I create nested files that have access to other files? I am working on a website where I use the following code to link different pages: <div class="topnav"> <a href="scenes/home.html">Home</a> <a h ...

html

Incorporating server-side rendered components into a Vue.js parent component

I have a server-side rendered page that includes information about "orders" and a root Vue object initialized as the "parent object." Is it feasible to assign the rendered HTML orders as children of that parent Vue object? Vue.js is known for its dynamic ...

javascripthtmlvue.jsserver-side-rendering

What is causing my CSS grid items to overlap instead of aligning neatly in rows and columns?

I am encountering an issue with CSS grid where items are stacking on top of each other when I assign them to grid template areas. As a newcomer to CSS grid, I suspect that I may be overlooking some key principles. You can view my playground here: https:// ...

csslayoutcss-grid

The stylesheet reference, <link rel="stylesheet" href="../css/style.css">, appears to be malfunctioning

My project structure includes css files in a folder named css and jsp files in a folder named jsp, both located inside the WEB-INF folder. I am wondering how to access the css file within a jsp file. <link rel="stylesheet" href="../css/style.css> T ...

htmlcssjsp

What is the best way to toggle an element's visibility using the select tag?

Let me break down the issue for you. In my HTML code, I have a select element that looks like this: <select id="seasons" multiple="multiple"> <option value="s01">Season 1</option> <option value="s02">Season 2</option> ...

javascripthtmljqueryhtml-select

Streaming videos using Flask with a custom template

After successfully implementing the DWA path planning algorithm in C with Python bindings, I have decided to create a web application demo. The concept involves a "robot" following the mouse using DWA, while allowing users to draw walls for objects. My ini ...

javascriptpythonhtmlflask

Mobile Image Sizing with Bootstrap 4 Cards

I am currently developing a responsive web application using Bootstrap 4 and incorporating cards with images on one of the pages. The layout functions properly when resizing the window on desktop view; however, upon viewing it on mobile devices, I noticed ...

htmlcssbootstrap-4

The behavior of the button type value varies between Internet Explorer and Firefox

Inside a form, I have a button with the following code: <form method="post" action=""> <button type=submit value="hello" name="submitform">World</button> </form> Interestingly, the behavior of this button type varies across differ ...

phphtml

ng-class in Angular seems to be functioning properly on <td> elements, but is not

When using this HTML inside an ng-repeat, there is a difference in behavior: This part works fine: <tr> <td ng-class="info.lastInMonth">{{ info.date_formatted }}</td> ... But this section does not work as expected: <tr ng ...

htmlcssangularjshtml-table

When the progress bar is clicked, the background color changes and then changes back again

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 https://i.stack.imgur.com/Bnd0k.png I have created a progress bar that resembles the screenshot provided. When I hover over it, the color changes to green. However, I am looking for assistanc ...

javascripthtmlcsstwitter-bootstrap

Guide on retrieving data from a database and showcasing it on an HTML5 webpage using the combination of jqTouch and PhoneGap

I am currently working on developing an iPhone application for mobile health using a combination of HTML5, Javascript, jQTouch, and PhoneGap. This project is part of my school assignment aimed at gaining hands-on experience in building an iPhone app with t ...

jquerydatabasehtmlcordovajqtouch

Calibrating height using CSS

Within my HTML document, I have the following structure: <div id="content"> <div id="wrapper"> <div id="steps"> <form id="formElem" name="formElem" action="" method="post"> <fieldset class ...

csshtmlheightfieldset

The attribute selector is malfunctioning

Currently, I am attempting to target img tags based on the alt attribute in order to correctly load a background-image on mobile devices. The issue I am encountering is that regardless of the combination of attribute selectors I use, it does not seem to w ...

imagecsscss-selectorsselector

Retrieve the URL from an iframe using Python and Selenium

On my website's main page, there is an iframe containing the text Code: LWBAD that I need to retrieve. For a clearer visual, refer to the image below: https://i.sstatic.net/DJgbd.png Below is the source code of my main HTML page which includes the ...

pythonhtmlseleniumiframe

Troubleshooting the Inline-Block Problem with Jquery Image Bubble Display

Recently, I've been exploring ways to eliminate the padding that is creating space between images before they align correctly. The culprit causing the padding seems to be the display: inline-block property. While it was suggested to have all the li t ...

css

What is the best way to adjust text across several lines to perfectly fit within a div's width?

http://codepen.io/anon/pen/oXGMQZ Is there a way to automatically adjust the font size of each span within a parent div so that it fills the width of the parent div? <div class="box"> <span class="fit">what</span> <span class="fi ...

javascriptjqueryhtmlcss