Solved

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

Posted on 2014-04-09
2
717 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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

840 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