Solved

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

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

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

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 …
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

734 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