CODEWITHSUNDEEP
htmlcssresponsive-designcss-float
Jeffrey
Jeffrey

Reputation: 4146

CSS: Responsive vertical columns

I have a basic vertical column layout. See jsbin for example. I'm now wanting to make it responsive so that the smaller the screen the far left handed columns fall off (not displayed) one by one. The only catch is that the <article role="main"> may or may not be on the page. So the css has to work for all the examples below. I appreciate all thoughts/suggestions :)

Example 1:

<nav role="navigation"></nav>
<main role="site">
  <article role="list"></article>
  <article role="list"></article>
  <article role="main"></article>
</main>

Example 2:

<nav role="navigation"></nav>
<main role="site">
  <article role="list"></article>
  <article role="list"></article>
  ...
</main>

Example 3:

<nav role="navigation"></nav>
<main role="site">
  <article role="list"></article>
</main>

==========

Update:

I updated the jsbin example so that the overflow-y is hidden and that the <article role="main"> has a min-width.

Unsolved: Can someone show me how to order the columns so that as the screen gets smaller the last column is always displayed, the first column is hidden first, the second column is hidden next, etc..? (I'd prefer not to use media queries if at all possible.)

Update 2:

I added media queries to the jsbin example and it's now working how I wanted. If you know how to accomplish this solution without them, feel free to post an answer. Thanks!

Upvotes: 0

Views: 548

Answers (1)

crafter
crafter

Reputation: 329

I really wish i could post it as comment, but it is too long for that

Dont' know weather it works, couldn't try and test. So giving it like a plain thought. If you can add class to them, it might be easy. 1. Add class navigation to , and articles to so, 

@media all and (max-width: 360px){
 .navigation{ display: none; }
 .article {display: none;}
 /* and CSS to the MAIN content */ }

@media all and (max-width: 480px){
 .navigation{ display: none; }
 .article:first-child {display: none;}
 /* and CSS to the MAIN content and last child of sub nav */

}

@media all and (max-width: 780px){
 .navigation{ /* CSs comes here */ }
 .article { /* CSs comes here */ }
 /* and CSS to the MAIN content */ }

Upvotes: 2

Related Questions