Hi am designing a site with three columns for my homepage, but am getting confuse as to how to change the column layout when my screen changes to tablet type. what I really need is how to still have two columns while in the tablet layout, the third column should move to the bottom of the two columns in normal flow
We need to know more about how you are making the columns. Are they columns of separate content? If so are they floats, table cells, flex, or what? Or are they css columns where the same content flows from one to the next?
Ok, here is the structure of my index page:
<div id="elements">
<div class="section">
<article>
news goes here
</article>
<article>
picture slide show goes here
</article>
<article>
thumbnails images go in here,
</article>
</div>
footer and others follows
</div>
Hi guys I got it wrong here I wanted to send an html code typed with the tags but is did not appear after I send my reply I guess I need more info on how this is than. I have never used this until today. more tutorials will help
But what css methods are you using to put the data in columns? Like table-cell, float, inline-block, flex-box, etc…
Typically you just add a media query to revert that css rule. So float:right becomes float:none or display:table-cell becomes display:block and so on.
To make life simple for me. here is plain English what my layout looks like.
three tags within a section tag, I floated two to the left and one to the right.
the middle one contains picture thumbnails, the last column contains news.
I want to have a two column layout in a tablet screen size, one column in mobile.
I will also want to the thumbails to turn horizontal when am within two cloumns
You can highlight your code, then use the </> button in the editor window, which will format it.
Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
1 Like
It’s a bit tricky with everything floated, it causes issues with clearing as well as element order. Would you consider changing to display: table or flex-box even? And the order in the 2 col layout, does the thumbs come before or after the columns?
If you are floating I would change to display:table and table-cell for a more solid approach and then use media queries to move down in columns.
Here’s a rough idea that shgould show you the process.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
*, *:before, *:after {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.section {
display:table;
width:100%;
max-width:1280px;/* or whatever the max-width needs to be*/
margin:auto;
background:#f9f9f9;
border-spacing:20px;
}
.col {
display:table-cell;
vertical-align:top;
border:1px solid #000;
padding:10px;
}
.col1 {
width:300px;
background:#ccc;
}
.col3 {
width:250px;
background:#999
}
@media screen and (max-width:980px) {
.section {
display:block;
border-spacing:0
}
.col {
float:left;
display:block;
width:49%;
background:transparent;
border:none;
}
.col2 {
float:right;
}
.col3 {
display:block;
float:left;
clear:both;
width:100%;
border-top:1px solid #000;
}
}
@media screen and (max-width:580px) {
.col{float:none;width:auto;border:none;border-bottom:1px solid #000;}
}
</style>
</head>
<body>
<div class="section">
<div class="col col1">
<h2>Column1 content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae pretium enim. Nulla viverra felis nunc, varius dignissim eros posuere quis. Sed sagittis tellus a massa feugiat egestas. Vivamus dictum arcu neque, et pharetra nisi cursus sed. Mauris nisl magna, sagittis vitae ante ut, gravida blandit augue. Cras a lacus egestas, rhoncus nulla vitae, faucibus sapien. Praesent ac elit id mi dapibus faucibus vel sit amet leo.</p>
</div>
<div class="col col2">
<h2>Column2 content </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae pretium enim. Nulla viverra felis nunc, varius dignissim eros posuere quis. Sed sagittis tellus a massa feugiat egestas. Vivamus dictum arcu neque, et pharetra nisi cursus sed. Mauris nisl magna, sagittis vitae ante ut, gravida blandit augue. Cras a lacus egestas, rhoncus nulla vitae, faucibus sapien. Praesent ac elit id mi dapibus faucibus vel sit amet leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae pretium enim. Nulla viverra felis nunc, varius dignissim eros posuere quis. Sed sagittis tellus a massa feugiat egestas. Vivamus dictum arcu neque, et pharetra nisi cursus sed. Mauris nisl magna, sagittis vitae ante ut, gravida blandit augue. Cras a lacus egestas, rhoncus nulla vitae, faucibus sapien. Praesent ac elit id mi dapibus faucibus vel sit amet leo.</p>
</div>
<div class="col col3">
<h2>Column 3 content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae pretium enim. Nulla viverra felis nunc, varius dignissim eros posuere quis. Sed sagittis tellus a massa feugiat egestas. Vivamus dictum arcu neque, et pharetra nisi cursus sed. Mauris nisl magna, sagittis vitae ante ut, gravida blandit augue. Cras a lacus egestas, rhoncus nulla vitae, faucibus sapien. Praesent ac elit id mi dapibus faucibus vel sit amet leo.</p>
</div>
</div>
</body>
</html>
Note that the above method would work right back to IE8 (assuming you added support for media queries with a polyfill) bit the downside is that column arrangement would need to be logical as in my example.
If you just want to support modern browsers then flexbox would be the way to go and would achieve that effect without media queries most likely. Flexbox also allows you to reorder the columns from the CSS but generally that messes with things such as copy and paste or logical tabbing in some browsers so I tend to avoid reordering content.
1 Like
Or ever so neatly with flexbox.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.parent {
display: flex;
flex-flow: row wrap;
}
.child {
flex: 1 0 33%;
min-width: 15em;
background:red;
border:1px solid #fff;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"><p>test</p></div>
<div class="child"><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p></div>
<div class="child"><p>test</p></div>
</div>
</body>
</html>
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.