media queries

For Media Queries you need to create a series of designs based on the main design for your site. You need at least three designs which are different in width. These designs need to work visually when transitioning from one size to the next. Main Page with Details for Media Queries.

Resize your browser window to see the changes for this page at width of 980, 800 and 620px with a minimum width of 280px. Below are the key CSS elements for this page.

You can initially test your page by just resizing the browser window but you will need to test on a varity of devices before you go live. There are also emulators that you can use. Most of the sites with emulators charge a fee. Opera has a simulator for a cell phone. None of the emulators/simulators that I have tried seem to work as well as actually testing on the device.

monitor

The first is the starting point, and in this case, this page, its largest width is for any monitor that is set to over 1024px wide (your design 980px wide).

reader

The second is for a digital reader (ipad etc) . These readers come in a varity of screen sizes and most information can be viewed at a portrait or landscape orientation. The ipad is 768px, the Kindle is 600px and others have various screen sizes.

cell phones

Cell phones can be anywhere from 480px (iphone, landscape) all the way down to 280px wide. In order to accommodate the variety of sizes you need to create a site using percentages for most of the page elements. You will probably need to reposition some elements at some stage in size change.

element sizes

You will work more with percentages to create the various elements for your page (columns, images etc.)
You will also work min and max widths.
for example a column or an image could have all three widths:
selector{
width: number%;
min-width: number px;
max-width: number px;}

percentages

Width: number%: means that the element will be the percentage of the containing element (parent) and will change size as its parent resizes the max and min widths insures that the element will not be either too big or to small.

this page

Both the header and the main container have a width of:
max-width: 980px;
The page will not start to resize the until the browser/device window reaches 980px wide.

---------------------------------------------START---------------------------------------------
The information below does not include all of the critiera.
Link to complete CSS
It is important that you make sure that your width + padding + margins + borders = 100% or less

header max-width 980px

content - container max-width 980px

center column within content = 70% + 1px
section #centerColumn{
width: 66%;
margin-left: 2%;
padding-left: 2%;
float: left;
border-left: 1px;
}

right column within content= 18%
aside{
width: 14%;
margin-left: 4%;
float: right;
}

Total 98% plus one pixel

------------------------------------ WIDTH 980 - 800 ---------------------------------------------
With the first media querie I only added a margin to the right and left of the design and a percentage size to the title container as the window gets narrower both start to resize.
All of the columns within the content area are resizing because they already have percentages for their widths.

@media only screen and (max-width : 980px) {

}

------------------------------------ WIDTH 800 - 620 ---------------------------------------------
The main changes are the width of the photoContainer (in the header) which is now narrower forcing two of the images to fall below the other two.

One of the images in the header is no longer displayed (#sfThree) it now has display: none;

The main container (#container) holding the columns now has a larger top margin so that it is lower than the four banner images

The title holder (#title) and the title image are repositioned

float: none; - has been added to both the main content image (which now has a percentage width) and the right column (aside), forcing the right column below all of the content and image to resize as the window is resizes.

The main container for all of the content has a new min width and max width

There are also other changes in margins and padding they are not shown in the code below

The header remains the with the starting max-width of 980px, plus the margins that were added at 980px.

@media only screen and (max-width : 800px){

#container{
margin-top: 110px;
}

#title{
top: 120px;
left:20px;
height: 60px;
width: 360px;
}
#title img{
width: 76%;
margin-left: 10%;
}

nav{
padding-right: 4%;
margin-right: 6%;
}

section #container{
margin-left:0px;
margin-right:0px;
padding-left:10px;
padding-right:10px;
max-width: 780px;
min-width: 300x;
}

section #centerColumn{
float: none;
width: 100%;
margin-right: 0px;
margin-left: 0px;
}

aside{
float: none;
width: 360px;
margin-left: 20%;

}
.imageOne{
width: 98%;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
float: none;
max-width: 304px;
max-height: 205px;
}

}

------------------------------------ WIDTH 620 - 280 ---------------------------------------------
This size has the most changes, not all are listed

Header now has a max-with of 620px

The float is removed from Nav and the list for the menu is now displayed inline
Display: inline; for menu list (.menu)
Photo container in header has a percentage and min and max width.

All of the photos in the headerhave a max -width and a percentage width one shown below (#sfSix)

The main content's (#centerColumn) width has been increased to 100% and its padding and margins reduced to zero.
The image at the top of main content has a percentage and min and max for width.

@media all and (max-width : 620px){

header{
max-width:620px;
margin-left: 0px;
margin-right: 0px;
}

#photoHolder{
top: 80px;
width:100%;
max-width:620px;
min-width: 280px;

}

#sfSix{
position:static;
float: left;
margin-left: 1%;
width:24%;
max-width:117px;
margin-top:0px;

nav li {
display: inline;
height: 26px;
}

nav{
float: none;
width: 90%;
max-width: 620px;
min-width: 300px;
}

.menu{
display:inline;
}

section #centerColumn{
width: 100%;
border-left-width: 0px;
margin-left: 0px;

}

Back to Main Media Queries' Information