In order to make my website fully responsive, I needed to use media queries to define breakpoints where the website would change slightly to accommodate the size of the browser. For example, a fully functional 960px width website would be inappropriate for a mobile device as everything would be too small to read, or the dreaded scroll would have to be used.

I have defined two standard breakpoints:

@media screen and (max-width: 720px) {}
@media screen and (max-width: 480px) {}

I also have these but they only apply for the interactive map:

@media screen and (max-width: 1350px) {}
@media screen and (max-width: 990px) {}
@media screen and (max-width: 790px) {}
@media screen and (max-width: 660px) {}

Finally, I added this to make my website work on my iphone. This basically is an exact copy of the 480px media query, just with a different name that the iphone prefers:

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {}

Here are my two main media queries, and I will explain what they do to the elements, and will show a picture at the end of all 3 formats next to each other so you can see the difference.

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

#Rightside and #leftside both disappear at this point as they go underneath the container
#rightside{
display:none;
}

#leftside{
display:none;
}

Width and height change for tablet format.

#logo2{
max-width:150px;
max-height:97px;
position:relative;
}

#Left loses it’s float so stacks onto the top of #Right. It’s width is also increased from 50% to 100%. #Right will have the same attributes as this one.

#left{
max-width:720px;
width:100%;
float:none;
}

This div gets both top radii in this media query, rather than sharing them across 4 divs top left and right, bottom right and left. All of the aside divs have a 100% width now to match #left. They are also all now height:auto as they don’t have to be measured next to anything.

aside{
max-width:720px;
width: 100%;
height:auto;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}

This div loses its radius

#aside2{
max-width:720px;
width:100%; /* 440 (originally 480) / 480 */
height:auto;
float:left;
}

Same as above

#aside3{
max-width:720px;
width: 100%; /* 440 (originally 480) / 480 */
height:auto;
float:left;
}

This div gains both of the bottom left and right radii, so all 4 divs now have rounded corners again.

#aside4{
max-width:720px;
width: 100%; /* 440 (originally 480) / 480 */
height:auto;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}

This means that anything in the html with a class:’norm’ will now be invisible.

.norm{

display:none;
}

This means that anything with the class:’tab’ will now be visible.

.tab{
display:block;
}

Same as #left

#right{
max-width:720px;
width:100%;
float:none;
}

In the right side, the divs will be stacked in 2 rows of 2. They’ve all been set to a height of 320px. and two float to the left and two float to the right.

This one had to change from a black to a yellow background because of its positioning. It also has the top left radius at 20px.

#article1{
max-width:360px;
width:50%;
height:320px;
float:left;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
background-color:#FF9;
}

This one is exactly the same as #article1, except that it’s background color has changed to black and it has a top right radius of 20px rather than left. 

#article2{
max-width:360px;
width:50%;
height:320px;
float:right;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
background-color:#000;
}

This is the same as #article1 except that the border radius is bottom left.

#article3{
max-width:360px;
width:50%;
height:320px;
float:left;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
}

This is the same as #article2 except the radius is on the bottom right and this one has the margin-bottom to separate the #right div from the footer by 30px.

#article4{
max-width:360px;
width:50%;
height:320px;
float:right;
margin-bottom:30px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}

Anything with the class:’toosmall’ will now be invisible at this screen width.

.toosmall{
display:none;
}

}

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

Here the top left and right radii change, and the height is set to auto so that all of the text and the logo fits inside the header.

header{
width:100%;
height:auto;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}

I wanted the logo to be in the center for the mobile version, so the text-align is set to center, but added a margin to the top to keep it away from the top of the header. 

#logo{
width:100%;
float:none;
text-align:center;
margin-top:10px;
}

The logo needs to be quite small so I set it a max width of 75px and a width of 32.5% of the header.

#logo2{
max-width:75px;
max-height:50px;
position:relative;
width:32.5%;
}

The text size is reduced on the mobile version to 65% the norm. I also set a background colour so that the text would have a white backdrop.

#title{
width:100%;
max-height:50px;
float:none;
font-size:65%;
text-align:center;
background-color:white;
}

This is where I set the title h1 to center in the header.

#h1one{
text-align:center;
}

I wanted the nav bar to look different on the mobile version. I wanted the 3 divs to stack on top of each other to create an app like effect on the mobile page.

nav{
max-width:480px;
text-size:50%;
margin-bottom:0;
}

To make the nav bar as I wanted it, I had to set the width of each div to 100%, and take away any float. This meant that the three divs would stack on top of each other.

#nav1{
max-width:480px;
width:100%;
height:30px;
float:none;
}

#nav2{
max-width:480px;
width:100%;
height:30px;
float:none;
}

#nav3{
max-width:480px;
width:100%;
height:30px;
float:none;
}

Because the slider probably wouldn’t function properly on the mobile version, I decided to get rid of the whole div and tell mobiles not to open it at all. 

#hero{
display:none;
}

At mobile stage the interactive map stops working too, so i’ve set it to 100% width to accomodate the space.

#map{
width:100%
}

This gets rid of the interactive more buttons from the map.

.more{
display:none;
}

This brings the left div with the aside divs into the middle with 100% width. There’s no float as it doesn’t need to be floated.

#left{
max-width:480px;
width:100%;
float:none;
}

Left and right are now the same and stacked one on top of the other instead of being next to each other.

#right{
max-width:480px;
width:100%;
float:none;
}

This reveals everything with a class ‘norm’ again after being hidden from the tablet version.

.norm{
display:block;
}

This hides anything that was tab specific with a ‘tab’ class.

.tab{
display:none;
}

Much the same as before, this has just given the border radii to the top of this div, and set the width and height to 100% and auto. All of the aside divs are now set to these dimensions to keep them containing any content they have.

This now has a black background.

#article1{
max-width:480px;
width:100%; /* 440 (originally 480) / 480 */
height:auto;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
clear:right;
background-color:#000;
}

Same as above with border radii removed, and given a yellow background.

#article2{
max-width:480px;
width:100%; /* 440 (originally 480) / 480 */
height:auto;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
clear:right;
background-color:#FF9;
}

Same as above without having the background colour changed.

#article3{
max-width:480px;
width:100%; /* 440 (originally 480) / 480 */
height:auto;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
clear:right;
}

Same as above with the radii put on the bottom two corners.

#article4{
max-width:480px;
width:100%; /* 440 (originally 480) / 480 */
height:auto;
clear:right;
margin-bottom:30px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}

I’ve given the footer a height of 200px to fit in all of the text contained.

footer{
height:200px;
clear:both;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}

I set up some gap divs to make space between other divs and this is no longer necessary.

#gap{
display:none;
}

}

Here is the result of using media queries in my website. From left to right, it goes full size, 720px and 480px:

mediaqueries

Advertisements