I am making a responsive webpage with a header, 3 columns and a footer. Basic stuff as I understand it.
On a smartphone-sized display, the columns will each be 100% width and 100% view-height, and will displaying one below the other. Each is floated left.
As the screen size increases from a smartphone-size to a tablet-size, the layout will change to the first column displaying 100% width and height as before, but the two other columns sitting next to each other rather than below one another, each with 100% view-height but only 50% width.
My issue is that the footer, which comes after the final column and is also floated left, is missing on the tablet layout, presumably because it is floating underneath the other columns somewhere. How do I get the footer to display below the last 2 columns rather than hiding underneath them?
The HTML:
<body>
<div id="wrapper">
<div id="social_topbar">
This is the social media bar fixed to the top of the screen.
</div>
<header>
This is hero space.
</header>
<main>
<div id="column1">
<div id="block1">This is a Souncloud Player.</div>
</div>
<div id="column2">
<div id="block2">This is a Youtube Video.</div>
<div id="block3">This is a Band Bio.</div>
</div>
<div id="column3">
<div id="block4">This is a Twitter Feed.</div>
<div id="block5">This is a Contact Form.</div>
</div>
<footer>
<h4>This is Footer</h4>
</footer>
</main>
</div>
The CSS:
/* ===== == = === SMARTPHONE 20em (320px) === = == ===== */
#media only screen and (min-width : 20em) {
#column1, #column2, #column3 {
width: 100%;
height: 100vh;
}
#block1 {
width: 100%;
height: 100vh;
}
#block2, #block3, #block4, #block5 {
width: 100%;
height: 50vh;
}
#footer {
width: 100%;
}
}
/* ===== == = === TABLET 48em (768px) === = == ===== */
#media only screen and (min-width : 48em) {
#column2, #column3 {
width: 50%;
position: absolute;
float: left;
}
#column3 {
margin-left: 50%;
}
#block2, #block3, #block4, #block5 {
width: 50%;
display: inline-block;
}
#footer {
position: absolute;
float: left;
clear: both;
}
}
Your time and expertise are very appreciated! Thanks in advance!
Related
I have the following html:
<div id="inner-container">
<div id="titles">
<div id="main-title">Main title here</div>
<div id="page-title">Page title here</div>
</div>
<nav id="progress-container>
<div id="page-counter">Page count here</div>
<a id="link-to-page-1"></a>
<a id="link-to-page-2"></a>
<a id="link-to-page-3"></a>
<a id="link-to-page-4"></a>
<a id="link-to-page-5"></a>
<a id="link-to-page-6"></a>
</nav>
</div>
and this css:
#inner-container {
display: flex;
}
#titles > div {
width: 100%;
}
#progress-container #page-counter {
float: left;
}
#progress-container a {
display: inline-block;
width: 30px;
height: 12px
border: 3px solid #ffffff;
}
#media (max-width: 900px) {
#progress-container #page-counter {
display: none;
}
}
I would like to add the necessary css flex rules so that #titles occupies the full remaining width, left over by #progress-container.
I have tried:
#titles {
flex-grow: 1;
}
And I've tried various rules for #page-progress, including 'flex-basis: auto' and 'flex-basis: content', but nothing has worked.
Note that I cannot set a fixed width to #progress-container as the number of 'pages' is dynamic and will vary. Also the #page-counter disappears below 900px.
If anyone has any ideas, I'd like to hear them!
try adding flex: 1; in #titles.
learn about flex properties over here
#titles {
flex: 1;
}
codepen link
In a responsive layout, I have two columns. The left column is the sidebar and the right column is the content.
Using a media query, when the screen width is tiny, the columns turn to 100% width and stack on top of each other.
In this case, I want the sidebar (the first div) to appear beneath the content (the second div).
I tried using float: right on a small screen once it's at 100%, but at 100% width, the float apparently doesn't matter.
.left, .right {
width: 100%;
float: left;
background: green;
}
.left {
float: right;
background: red;
}
.half {
width: 50%;
}
.space {
width: 100%;
display: block;
height: 40px;
}
And on the page:
<div class="left half"> <!-- To mimic full screen size -->
Left
</div>
<div class="right half">
Right
</div>
<div class="space"></div>
<div class="left"> <!-- To mimic small screen size -->
Left
</div>
<div class="right"><!-- This should appear first -->
Right
</div>
Here is the fiddle: https://jsfiddle.net/ph09frvw/
I'm sure this is not the first time someone wanted to wrap the sidebar under the content, I just haven't been able to find a solution.
You can use display: flex and use the order property to change the order of the <div> elements. While floating can be helpful for horizontal alignment, it will be of little help for vertical alignment, Here is an example:
.flex {
display: flex;
flex-flow: row wrap;
}
.left {
order: 2;
flex: 1 0 50%;
background: red;
}
.right {
order: 1;
flex: 1 0 50%;
background: green;
}
.full {
margin-top: 20px;
}
.full > .left,
.full > .right {
flex: 1 0 100%;
}
<div class="flex">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="flex full">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
You could use the display:flex; property combined with flex-direction to reorder your divs. Ref: https://css-tricks.com/almanac/properties/f/flex-direction/
Remember to reference your related class-names in your HTML elements' class attribute.
Your CSS display:block should do the trick, else try something like:
float: left
When you use: display:block on a div element, you do not need to specify width:100% as it should automatically span across the width if it is not hindered by anything else.
Make sure the position of these elements are "relative", else it may not work as expected; it may be stated globally that some specific tags should be displayed "absolute" and that may break what you're trying to achieve.
I had an issue with some positioning of four divs. these four divs are in two columns. The problem that I had was that when the top div on the right side became larger (height wise) than the two divs on the left side combined, the bottom div on the right side slid over to the left side underneath the two on the left side
My solution (with the help of a wonderful stack overflow all-star) was implementing a col-sm-offset-8 on that third div.
It was worked out here bootstrap, 4 divs, 2 columns. One column not floating right
This worked.....but. The result of this was that when the top div on the right side is now smaller, it does not respond (by respond I mean it no longer is positioned right underneath the top div on the right side).
<div class="col-xs-12 col-sm-8 start">Start ride For</div>
<div class="col-xs-12 col-sm-4 pull-right open">Open ride</div>
<div class="hidden-xs hidden-sm"></div>
<div class="col-xs-12 col-sm-8 conditions ">rides We have</div>
<div class="col-xs-12 col-sm-4 col-sm-offset-8 pull-right hours">Hours of Operation</div>
.start { height: 50px; background: #fcc; }
.open { height: 250px; background: #fdb; }
.hours { height: 50px; background: #ffb; }
.hidden { height: 50px; }
.conditions { height: 150px; background: #cfc; }
I have been tinkering with this issue on a pen as well.
http://codepen.io/KDweber89/pen/LVddKK?editors=110
So...basically with my four divs, I ALWAYS want the 'hours of operation' div to be directly below the 'open ride' div, regardless of what size the 'open ride' div is. (the reality is with the real work I am doing, the 'open ride' div often changes sizes based off of the user)
Wrap the entire content inside a div and execute the media query on max-width: 768px which is the break point for the change of order currently. Inside the media query, Use a flexible box property to reorder them.
.start {
height: 50px;
background: #fcc;
}
.open {
height: 650px;
background: #fdb;
}
.hours {
height: 50px;
background: #ffb;
}
.hidden {
height: 50px;
}
.rides {
height: 150px;
background: #cfc;
}
#media (max-width: 768px) {
.flex-wrap {
display: flex;
flex-direction: column;
}
.open {
order: 3;
}
.hours {
order: 4;
}
}
#media (max-width: 480px) {
.open {
order: 2;
}
.hours {
order: 4;
}
.rides {
order: 3;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-wrap">
<div class="col-xs-12 col-sm-8 start">Start Ride</div>
<div class="col-xs-12 col-sm-4 pull-right open">Open ride</div>
<div class="hidden-xs hidden-sm"></div>
<div class="col-xs-12 col-sm-8 rides ">Rides We have</div>
<div class="col-xs-12 col-sm-4 col-sm-offset-8 pull-right hours">Hours of Operation</div>
</div>
I have page with main content and right sidebar. But I want to have sidebar before main content block on page resize. How can I accomplish this?
HTML part:
<div id="header">
<div id="logo"></div>
</div>
<div id="container">
<div id="content">
main content
</div>
<div id="sidebar">
sidebar
</div>
</div>
<div id="footer">
footer
</div>
CSS part:
#container {
clear: both;
overflow: auto;
}
#content {
clear:both;
width: 70%;
float: left;
padding: 2% 0;
margin-right: 2%;
}
#sidebar {
width: 28%;
float: right;
padding: 2% 0;
}
In your media query float your #sidebar left and your #content right.
Because you are trying to do responsive design, what you want to do is media query in your CSS that will allow you to style the changes you want to make. The first decision you have to make is which screen sizes you want to display the responsive design. Tablets usually have a max-width of 760px and phones are around max-width of 480px. So the media query will look something like this:
CSS:
#media screen and (max-width: 480px){
...all your mobile styles are in here...
}
Now to answer the positioning issues you have. Of course there are several ways, the way I would do it is this is to move your sidebar above the content in the HTML, remove the clear from the content CSS, and inside the media query all you have to do is make the width for both divs 100%.
HTML:
<div id="header">
<div id="logo">The logo</div>
</div>
<div id="container">
<div id="sidebar">
sidebar
</div>
<div id="content">
main content
</div>
</div>
<div id="footer">
footer
</div>
CSS:
#container {
clear: both;
overflow: auto;
}
#content {
float:left;
width: 50%;
background:grey;
}
#sidebar {
width: 25%;
float:right;
background:lightgrey;
}
#media screen and (max-width:480px){
#sidebar {
width:100%;
}
#content {
width:100%;
}
}
Five of us have spent a day and a half working on this - got some very close solutions, but seems like it might be impossible to do without pulling in Javascript.
Scenario
We're using a responsive (media-query based), 960 grid layout. There are four divs with content. These four divs need to semantically be in the order shown in the image below. Since it is the 960 grid, we also have wrapper divs per "row" - like this:
<div id="topzone">
<div id="one">1</div>
<div id="two">2</div>
</div>
<div id="bottomzone">
<div id="three">3</div>
<div id="four">4</div>
</div>
Div one has the intro to an article, div two has an advertisement, div three has the actual article and div four has random stuff (facebook feeds, whatever).
On mobile, the divs need to display in order from one to four. On desktop they need to display the same, but in two columns, horizontally ordered first.
So far so good. Here is the kicker:
We don't know what height the divs will be - they will vary with each page (even the advertisement one).
There can't be any vertical gaps between divs.
We can't use Javascript (or really, really, really don't want to - we know we can do this easily with JS)
If you just do floats left and right you get gaps:
<div id="topzone">
<div id="one" style="float: left; height: 300px">1</div>
<div id="two" style="float: right; height: 200px">2</div>
</div>
<div id="bottomzone">
<div id="three" style="float: left; height: 100px">3</div>
<div id="four" style="float: right; height: 300px">4</div>
</div>
Attempted Solutions
CSS tables don't allow for rowspans. Workarounds either have the empty div get overlayed or leave gaps.
Masonry CSS orders the divs vertically so mobile would incorrectly drop divs two and four below one and three.
The closest we came was hijacking the overflow property to display the third div below the first one. This worked brilliantly - until we tried to add a footer to the page. Because overflow has no height according to the browser, the footer overlayed the third div.
<style type="text/css">
#one {
height: 300px;
background-color: yellow;
}
#two {
height: 200px;
background-color: brown;
}
#three {
background-color: blue; /* only shows in mobile, otherwise hidden behind #one */
}
#three-inner {
height: 100px;
border: 2px solid black;
}
#four {
height: 300px;
background-color: burlywood;
}
/* Non-mobile */
#media all and (min-width: 740px) and (min-device-width: 740px),
(max-device-width: 800px) and (min-width: 740px) {
#one {
float: left;
width: 50%;
}
#two {
float: right;
width: 50%;
}
#three {
height: 0px; /* turns into overflow */
width: 50%;
}
#three-inner {
clear: left;
}
#four {
float: right;
width: 50%;
clear: right;
}
}
</style>
<div id="topzone">
<div id="one">
<p><strong>First block.</strong></p>
</div>
<div id="two">
<strong>Second block</strong>
</div>
<div id="bottomzone">
<div id="three">
<div id="three-inner">
<p><strong>Third block.</strong></p>
</div>
</div>
<div id="four">
<p><strong>Fourth block.</strong></p>
</div>
</div>
</div>
There must be a way to do this in all CSS - tell me there is?