Joansy Joansy - 4 months ago 10
CSS Question

Why is only the top half of my website responsive?

Why is it that the top half of my website (

header-wrapper
and
menu-wrapper
) is responsive, but the bottom (
featured-wrapper
and
footer
) isn't?

Recently, I've noticed that this responsive website behaves strangely when the screen is smaller than about
1000px
. The header and navigation menu shrink to fit the screen size, but the content wrapper, called
#featured-wrapper
, and
footer
don't. The content is cut off, and where they cut off they are replaced with a dark charcoal colored bar that is the same as the footer color. When the website is viewed in a larger browser it centers perfectly.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="header-wrapper">
<div id="header" class="container">
<a href=""></a>
<h1></h1>
<br>
<h2></h2>
</div>
</div>
<div id="menu-wrapper">
<div id="menu">
<ul>
<li>
<!-- content -->
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="featured-wrapper">
<div class="extra2 container">
<div class="ebox1">
</div>
<div class="title">
<!-- content -->
</div>
</div>
</div>
</div>
<footer>
<div id="copyright" class="container">
<p></p>
</div>
</footer>
</body>
</html>


CSS for
#featured-wrapper
is:

#featured-wrapper
{
overflow: hidden;
padding: 10em 0em;
background: #FFF;
text-align: center;
}

Answer

Your css specifies

.container {
    width: 1200px;
    ...
}

which is used in both the footer and the main content. One possible fix to this is to change it to

.container {
    max-width: 1200px;
    ...
}

so that it will stretch to the width of its parent but will never go larger than 1200px wide.

Comments