Finding Me Studio - Nemo's Art, Animation & Interests

@font-face { font-family: header; src: url('https://file.garden/aNy90GYmaWI-Okj1/ROMANTIC.TTF'); } body{ font-family:Georgia, 'Times New Roman', Times, serif; font-size: 16px; background-color: #eeccff; } a{ color:white; letter-spacing: 4px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } a:visited{ color: #d5cfb9; } a:hover{ letter-spacing: 8px; } b{ color:#334185; font-size: 16px; letter-spacing: normal; } button{ background-color:#334185; width:90px; height:35px; border:none; font-family: inherit; margin-top: 5px; margin-bottom: 5px; } button, a{ letter-spacing: normal; } button, a:hover{ letter-spacing:4px; } .grid{ display:grid; grid-template-columns: 20% 65% 15%; grid-template-rows: 3% 20% 77%; max-width: 700px; height: 1000px; margin: auto; } .headertop{ grid-row: 1; grid-column: 2; background-color: #c44dff; padding:5px; box-sizing: border-box; } .sidebar{ grid-row: 2; grid-column: 1; width: 100%; height: 100%; background-color: #c44dff; padding:10px; box-sizing: border-box; overflow: auto; } .header{ grid-row: 2; grid-column: 2; width: 100%; height: 100%; background-color: #ede7d3; } .websitetitle{ grid-row-start: 1; grid-row-end: 2; grid-column: 3; font-family: 'header'; color:white; writing-mode: vertical-rl; text-orientation: mixed; font-size: 100px; letter-spacing: 4px; } .main{ grid-row: 3; grid-column: 2; width: 100%; height:100%; background-color: #ede7d3; padding: 15px; box-sizing: border-box; } @media only screen and (max-width: 700px){ .grid{ grid-template-rows: 3% 13% 12% 77%; grid-template-columns: 5fr 1fr; } .headertop{ grid-row:1; grid-column: 1; } .sidebar{ grid-row: 3; grid-column: 1; } .header{ grid-row:2; grid-column:1; overflow: hidden; } .websitetitle{ grid-row-start:1; grid-row-end:5; grid-column: 2; } .main{ grid-row:4; grid-column:1; } }

instert quote here

Responsive Image Gallery

Resize the browser window to see the effect!

Cinque Terre

Green Forest

Northern Lights

Mountains

Here we use media queries to re-arrange the images on different screen sizes:

If screen is larger than 768px wide - show four images side by side
If screen is smaller than 768px - show two images side by side
If screens is smaller than 480px - stack the images vertically (100%)

Tip: You will learn more about media queries later in our CSS Tutorial.