Solved

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

Posted on 2014-04-09
2
749 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 53

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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

632 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