Why is only the top half of my website responsive?
Question
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;
}
2 answers
solution1
1 ACCPTED 2015-01-12 01:00:17
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.
solution2
0 2015-01-12 00:54:50
This occurs because of this css:
overflow: hidden;
This prevents the #featured-wrapper element to show the slide bars:
The overflow property specifies what happens if content overflows an element's box.
hiddenThe overflow is clipped, and the rest of the content will be invisible
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.