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">
<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;
}
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.
This occurs because of this css:
overflow: hidden;
This prevents the #featured-wrapper element to show the slide bars:
CSS overflow Property
The overflow property specifies what happens if content overflows an element's box.
hidden The overflow is clipped, and the rest of the content will be invisible
Related
I want the page to be 100vh in height, so that there are no scrollbars on the whole page. For some reason the main grid is bigger than the screen size and some of the elements are getting clipped.
<html>
<body>
<div id="root">
<div class="app_container">
<div class="navigation">
<div class="navigation_logo_container"><img src="/icon.9c86b69e.png"
class="navigation_logo"><span>Sample</span></div>
<div class="navigation_buttons_container">
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
</div>
</div>
<div class="game">
<div class="quiz"><span class="question_text">Sample</span>
<div class="answer_choices">
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Codepen: https://codepen.io/GuacomoleCyclone/pen/RwKjmzO
Base on your setup the 100vh is working but your children are adding to the cause...
Meaning you have nav with height on fit-content...so lets just say 65px;
but then you have game div at height: 100%
If you remove that nav it works as you want, ..so for easily to solve this, you would have to also equate that extra height besides 100% game(nav height).
So meaning you would have to give:
.game {
height: calc(100% - 65px);
}
There are other ways to solve your setup without doing this but this is one of them.
I am using zurb foundation and I would like to make a web page that would have a structure and scroll effect like this one. I have an html structured like this:
<html lang="en">
<head>
...
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
...
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div id="app">
<!-- should be below the screen height -->
<div id="drawer">
<div id="magazine-detail">
...
</div>
<div id="magazine-detail-carousel">
...
</div>
</div>
<!-- the background image of the main-section -->
<div id="bg">
</div>
<!-- should take up the screen on the page load and start going below drawer on scroll down, on the z-axis -->
<div id="main-section">
<!-- sticky fixed top-bar -->
<div id="top-bar">
...
</div>
<div id="header">
...
</div>
<div id="carousel">
...
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Since I need a zoom in effect on the background picture I have setup div #bg like this:
#bg {
background-image: url('/img/cover.png');
background-size: cover;
z-index: -1;
animation: zoom 10s;
height: 100vh;
width: 100vw;
position: static;
-webkit-animation-fill-mode: forwards;
}
#keyframes zoom {
0% { transform:scale(1,1); }
100% { transform:scale(1.1,1.1);}
}
Since I saw in the example web page, on inspect in chrome, that the main page content, which in my case will be #drawer, is pushed with margin-top down to the bottom of the screen, I tried with this:
#drawer {
margin-top: 100vh;
position: relative;
z-index: 5;
}
But that is obviously not good, since when I have it like that I can't see the content of the other divs that are above the #drawer, because the margin takes the space with its color. And the margin-top = 100vh doesn't work for one more reason, I can't use jQuery scrollTop, for the divs that are not visible.
As for the main section, which for me in this case is what the #front-slider is in the example page, it needs to be on top of the #bg div, so that the #bg divs background-image serves as the backround of the main-section. I had to make div #bg so that I could have zoomed in effect on the background image, without main-section being scaled as well, when the background image is being zoomed in.
And for the top-bar I just need to be at the top like a sticky top-bar all the time.
I am not sure how to position all that to get the same effect and structure of the page shown as an example, I have tried with every possible css positions but nothing worked.
Updated
I have managed to work it out by using this.
I want to know how can I extend every DIVs inside a div wrapper. My div wrapper is fixed and has a width of 980px.
My HTML goes here:
<div id="wrapper" >
<div id="header" >
<strong>HEADER</strong>
</div>
<nav>
<strong>Navigation</strong>
</nav>
<div id="content" >
<div class="sidebar" >
<p>sidebar</p>
</div>
<div class="main-content" >
<p>content goes here.....</p>
</div>
</div>
<footer>
<strong>copyright etc....</strong>
</footer>
</div>
Here's the FIDDLE
What I want to achieve is every DIVs which hasbackground-color will expand and max-out the width of wrapper or something like filling the width of body to the fullest. But the content or texts must still has the width of 980px and is fixed. Thanks in advance.
Check this Demo
.div-inner {
width: 500px;
margin: 0 auto;
}
I'm looking for a possibility to set the footer to the end of my page or the end of my content if the content is greater than one page.
I do not want to have a fixed footer where the content is scrollable.
I do not know whether it is possible.
So, this is my code.
The div with class="div1" contains the content.
The content contains the content as well as the footer.
<div class="div1">
<div class="content">
<div class="myContent"></div>
<div class="myContent"></div>
<div class="myContent"></div>
<div class="footer"></div>
</div>
</div>
The footer has a height of 50px.
My problem is following:
If I have a screen height with height:500px and the content is only 150px high, the footer is set after the last div-element with class="myContent".
It should be set to the end of the page like the effect I receive with
bottom:0;position:fixed
But if the content is 600px high the footer should be set right after the last div with class="myContent". No styles would be needed here.
Have you got an idea how to solve it?
do you mean Make the Footer Stick to the Bottom of a Page ?
or this one
the css
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
and the html
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
I think this may help you get rid off this problem:
.footer {position:absolute;left:0;right:0;bottom:0;background:green;height:50px}
This may solve the objective:
<div style="position:absolute">
<div style="position:absolute">
<div id="top" style="height:50px;width:100%;position:fixed;left:0;top:0;background:red"> content 1 </div>
<div id="middle" style="background:green;position:fixed;top:50px; left:0;bottom:50px;right:0">content 2 </div>
<div id="middle" style="background:blue;position:fixed;top:100px; left:0;bottom:50px;right:0">content 3 </div>
<div id="bottom" style="height:50px;width:100%;position:fixed;left:0;bottom:0;background:orange">Footer</div>
</div>
</div>
The general html structure of my pages is
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
I have a 1000px layout with the content centering.
However, for a couple of the pages I have a banner in the content that should expand 100% to the sides of the browser (i.e., beyond the 1000px wrapper).
Should I delete the wrapper div for this page and apply width: 1000px; margin: 0 auto; separately? Or should I take the banner outside of the standard wrapper layout? What is a more standard way to do this?
Thank you.
Using style="overflow:show" for that content banners parent should allow it to show. Instead of width=100% you might need to use some javascript to get the screens width and make it that width.
I would take the banner outside of the wrapper.
I had same problem and done something like this:
.center
{
margin: auto;
width: 1000px;
}
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div class="center">
</div>
<div id="banner">
</div>
<div class="center">
</div>
</div>
<div id="footer">
</div>
</div>