For mobile devices, I would like my layout to be one column, and for desktops I need a main column and a smaller right column.
Still trying to get my heads around RWD.
Could this be accomplished by using display: table and having a mobile media query with just one column, and a desktop media query with two columns?
Or is there a better approach?
(I read up some on flexbox, but that seems too advanced for a RWD newbie like me, so I was hoping for a n easier approach.)
You can use a media query to change a two column layout to a single column layout, whether you choose display:table styles or flexbox or floats, etc
The best approach is the one that satisfies the needs of your layout.
Okay, but what makes this trickier is that I have lots of moving parts.
Here is a wireframe of what I would like…
Desktop View:
Mobile View:
I have seen a few examples online of doing a simple 2-column to 1-column switch, but what I have is “nested”.
The best idea I could come up with is to create a div for the main area and the side bar and treat them as two columns for the desktop and then collapse down so they are stacked for the mobile view. But I am not sure if that is “responsive” enough…
What you have there IS a simple 2-column to 1-column switch.
All such columns have nested content of some sort.
Once you switch to a single column then the only limit left is when a single column becomes too wide for the device.
Are you saying my idea was okay?
Here is a simple code example… (Note: I left out the nested parts for now.)
<!doctype html>
<html lang="en">
<head>
<title></title>
<!-- HTML Metadata -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Stylesheets -->
<link rel="stylesheet" href="css/test6.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- Main Content -->
<section id="homeMain">
Main content here...
</section>
<!-- Side Bar -->
<aside id="homeAside">
Sidebar items here...
</aside>
</div>
<!-- Footer -->
<footer>
</footer>
</body>
</html>
/******************************************/
/* Basic CSS Reset */
/******************************************/
html, body, address, blockquote, p, div,
h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd,
table, tr, th, td,
form, fieldset, caption, br, hr, img,
header, footer, nav, section, article, aside{
margin: 0;
padding: 0;
}
header, footer, nav, section, article, aside{
display: block;
}
html{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
font-size: 1em;
line-height: 1.4;
color: #000;
}
#wrapper{
display: table;
table-layout: fixed; /* Equal-width boxes. */
border-collapse: collapse;
width: 100%;
}
#homeMain{
display: block;
width: 100%;
background-color: #bdf;
}
#homeAside{
display: block;
width: 100%;
background-color: #fbe;
}
@media screen and (min-width: 53em){
#homeMain{
display: table-cell;
width: 70%;
background-color: #bdf;
}
#homeAside{
display: table-cell;
width: 30%;
background-color: #fbe;
}
}
What do you think?
Looks reasonable. I would suggest that you should not set a width on both columns… just one. The other will be the difference between the table width and the column with the set width.
Looks OK. Just nit picking here, it should work as it is, but I will mention: Since you are using the “mobile first” approach, you don’t need the display: block for the two columns/sections, since block is the default display for those elements.
Also the wrapper table settings may be better placed in the media query, since it is not being displayed as a table in the mobile view.
For the mobile first, do I need width: 100% on #mainHome and #mainAside?
Could it look better, though?
Originally I was using div’s which is why I did this. But I changed to something semantic, so good catch.
Good point.
“block” is the default display for <div>, too.
The comments that followed cover that.
But do I need width: 100%?
I’m not sure if that makes sense since there is already display: block…
You want it on the wrapper because displaying as a table, it will shrink to fit content otherwise. But do remove it from the two columns. Why?
If you only set one, and they are both set to 100% before the query, the one you don’t re-set in the query will still want to be 100%. As table cells they will fill the wrapper whatever.
Also, there is no need to set the background-color again in the media query if it has already been set in the default view and does not change.
My thinking was that if you set each column to display: block that that would make each column “100% wide” and therefore adding width: 100% would be redundant. Follow my thinking?
So am I right or wrong on this?
If you are doing mobile first, the [future columns] will begin as block objects and not require a width. When the width is reached at which the two columns will be created, then {display:table-cell} and column width(s) would be applied. Your strategy sounds correct.
More clarification about table and column widths…
If the table uses {table-layout:fixed} and the table has a width assigned, then applying a width to one column is sufficient to establish the width of both columns.
If the table uses {table-layout:auto} and if column widths are assighed, then the sum of the widths of the columns must not exceed 100% and are basic starting points but can change if the content forces the width to change. In other words, the widths can shift as needed to accommodate the content. Classic table behavior.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.