ch.8 responsive design one thing i cannot change percentage wise //1em==16px (Annoying to convert to and from em and px) setting height to percentage doesn't do much padding box scale able images fluid vs fixed layout 286-289 fonts: prefer em over percent: pg 291 https://www.w3schools.com/css/css_rwd_mediaqueries.asp media queries cutoff for tablets and phones meta tag description https://www.w3schools.com/css/css_rwd_viewport.asp set initial scale to 1 https://www.w3schools.com/css/css_rwd_mediaqueries.asp @ sign before media @media only screen and (max-width: 600px) { body { background-color: lightblue; } 600px is the breakpoint change 600xpx https://www.w3schools.com/css/css_rwd_grid.asp grid view is dividing up responsive design into 12 col https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_cols

Chania

The City

Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

Resize the browser window to see how the content respond to the resizing.

Not having div everywhere, replace with article and header

Chania

The City

Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

Resize the browser window to see how the content respond to the resizing.

Media query kinda has row col much like tables do https://www.w3schools.com/css/css_rwd_images.asp https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2

Resize the browser window to see how the image will scale.

Chania

The City

Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

What?

Chania is a city on the island of Crete.

Where?

Crete is a Greek island in the Mediterranean Sea.

How?

You can reach Chania airport from all over Europe.

Resize the browser window to see how the content respond to the resizing.

I added img to above , w/ max-width of 100% https://www.w3schools.com/css/css_rwd_videos.asp

Resize the browser window to see how the size of the video player will scale.

adjust width to max-width https://www.w3schools.com/cssref/css3_pr_mediaquery.asp