?
Solved

CSS media queries: order of layout of <div> sections

Posted on 2014-04-09
2
Medium Priority
?
784 Views
Last Modified: 2014-04-15
Hi,

I was just reading about the skeleton CSS media queries framework for different layout sizes here:
http://designshack.net/articles/css/build-a-responsive-mobile-friendly-web-page-with-skeleton/

I understand the coding. However, I was reading this post:
http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design

and there are some examples of a responsive layout like the about.com page:
http://www.about.com/#!/editors-picks/

My question is how does one code the layout to determine what goes first and second and third and so forth?

For instance, in that link of the about page, there are several photos and they are probably in some <div> tags. But when viewed in a vertical layout on my mobile phone the photos are shown in a certain order. Is the order determine by the order of the code?

Just learning the responsive layout media queries.

Thanks<><
0
Comment
Question by:Victor Kimura
2 Comments
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39990694
I prefer boostrap myself http://getbootstrap.com/ and even http://foundation.zurb.com/

The heart of these things is the grid and media queries.   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

When a set of css classes (or id's) are in a media query, those classes are turned on or off based on any number of ways the media query is set up.  In this case, it is based on the width of the viewport.

When you are designing your page, you have to plan it out in 3 to 5 different possibilities.  You may have one element hidden on a small screen or maybe it stacks.  You just have to do a bit of planning.    

The way it works in brief is the divs are floated to left and set on a 12 column grid.  Notice the classes are numbered.  If you want 2 columns you could use any combination of classes that add up to 12.  As the viewport shrinks so does the container until it reaches the parameters of the media query you have set, then the new css takes over that is set in the query.

I have a nice simple write up about bootstrap responsive on another question http:Q_28406542.html#a39982826
0
 

Author Closing Comment

by:Victor Kimura
ID: 40001063
Ok, thanks. Scott. I'm taking a look at bootstrap. Looks like it has good docs which is what I need. Going to study it. =) Father God bless you<><!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question