'Need to make the HTML header and footer run as wide as the table width (especially for mobile browsers)

I have a header and footer background images to display in my page and I need to make the HTML header and footer run as wide as the table width (especially for mobile browsers). Currently it runs as long as the width of the PC Browser but not the mobile browser.

CSS:

<meta name="viewport" content="width=device-width, initial-scale=1">
body {
     font-family: Calibri, Calibri, sans-serif;
}

header {
    background-image: url(header.png);
    height: 446px;
    align: right;
    text-padding-top: 30%;
    background-size: 100% 100%;
}

section::after {
    content: "";
    display: table;
    clear: both;
    height: auto;
}

/* Style the footer */
footer {
    background-image: url(footer.png);
    background-size: 100% 100%;
    text-align: center;
    color: black;
}

@media (max-width: 800px) {
    nav, table {
      width: 100%;
      height: auto;
    }
}

a:hover, a:active {
    color: green;
}
htmlcss


Solution 1:[1]

You're using a table, which is at width: 100% but its parent isn't, and therefore is taking the maximum width (full size image + text).

If you put width: 100% on your section, you'll achieve what you want. After doing that, your images are too large for mobile, and are taking more space than the screen size, you should reduce their width.

Several other points you should follow:

  • A CSS file, apart from your HTML, would be nice, it's good practice except if your css is very small. As I'm guessing you're not done, you should definitely put it in a separate file.
  • You are using some CSS that does not exist, I would advise you to use an IDE (like Visual Studio Code) to help you write code.
  • Inline CSS is bad practice, as you're already using a stylesheet in your HTML, you should use it (or see the first point).

Please next time, take some time to make a code snippet that is easily editable by everyone and provide a full "working" example of your problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Killick

Related Questions