Exercise 4: Media Queries

Add media queries to your CSS to make your sandbox design function at the mobile and desktop level. It doesn’t need to look good at the tablet level.

Demo and example layout files: 
Google Drive Folder

Helpful Links with Examples:

1. First define the device-width in the <head> of your HTML document. 

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> viewport element in the <head> of your html document:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Explanation:

A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

2. Create a media query for a smaller screen size. You are also welcome to do more than one breaking point if you want. If you do an additional one, just copy and paste the line below again and change the pixel amount. 

Copy and paste the following into the bottom of your CSS document.

/* smaller than phablet */
@media (max-width: 600px) {} 

3. Inside the curly braces {} of the media query, change the following and remember to use relative units like ems for font-sizes and % for layout throughout your CSS. 

width of your content to fit a smaller screen (such as container, header, nav, columns, footer)

margin and/or padding to adjust to smaller screen (such as container, header, nav, columns, footer)

font-sizes to work better with a smaller screen (such as h1, h2, p, a)

Also change a minimum of 4 other properties. Below are some suggestions, but can do anything you want! Only include the properties you want to change in the media query. If it isn’t changing, then you don’t need to put it in there.

background-color

background-image

color

display:none to :block. (this would make something invisible become visible or vice versa)

display:inline to :block. (this would make your nav links go from being horizontal to being vertical)

float:left or :right to :none

text-align

You could also try to  be fancy with the navigation?
Examples again:

Example

Example of changing widths and margins of a class called .columns – which in this case is applied to two columns of equal size on the page:

/*css for desktop size */
#container {
    width:80%;
    margin:auto;
}

.columns {
    width: 48%;  /* 48% + 48% = 96% + 4% margin-left = 100% */
    float: left;
    margin-left: 4%;
}

.columns:first-child {
    margin-left: 0;  /* this removes the 4% margin-left to the first instance of a column in a row - so it won't go over 100% total */
}

/* css media query for size smaller than mobile */
@media (max-width: 400px) {
    #container {
         width:100%;  /* this makes the container go the full width of the browser instead of 80% */
     }
    .columns {
         width: 90%;  /* this makes the columns fill 90% of the width, making it so they stack on top of each other down the page instead of next to each other */
         margin:auto; /* this will center the columns on the screen and override that 4% margin-left */
     }
}

4. W3Schools Reference links again: