Last active
January 28, 2023 03:59
-
-
Save prof3ssorSt3v3/0dedf51346e2fa680246d3f1c35ce538 to your computer and use it in GitHub Desktop.
Code for Media Query Ranges video
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Media Query Ranges</title> | |
| <link rel="stylesheet" href="./main.css" /> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Media Query Ranges</h1> | |
| </header> | |
| <main> | |
| <section><p>The Small Size Query</p></section> | |
| <section><p>The Medium Size Query</p></section> | |
| <section><p>The Large Size Query</p></section> | |
| </main> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | |
| Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; | |
| } | |
| body { | |
| min-height: 100vh; | |
| display: grid; | |
| grid-template-rows: auto 1fr; | |
| } | |
| header { | |
| background-color: #222; | |
| color: #fff; | |
| } | |
| header h1 { | |
| font-size: 4rem; | |
| font-weight: 100; | |
| padding: 2rem; | |
| } | |
| main { | |
| display: flex; | |
| flex-wrap: nowrap; | |
| justify-content: center; | |
| } | |
| main section { | |
| flex: 1 1 33.33vw; | |
| font-size: 2rem; | |
| font-weight: 300; | |
| display: grid; | |
| place-items: center; | |
| transition: flex-basis 0.8s ease-in; | |
| } | |
| section:nth-child(1) { | |
| background-color: #ff5e5b; | |
| color: white; | |
| } | |
| section:nth-child(2) { | |
| background-color: #00cecb; | |
| color: black; | |
| } | |
| section:nth-child(3) { | |
| background-color: #ffed66; | |
| color: black; | |
| } | |
| p { | |
| padding: 1rem; | |
| font-size: 1rem; | |
| } | |
| /* @media screen and (max-width: 600px) { */ | |
| @media screen and (width < 600px) { | |
| main section { | |
| flex-basis: 1rem; | |
| } | |
| main section:nth-child(1) { | |
| flex-basis: 60vw; | |
| } | |
| main section:nth-child(1) p { | |
| font-size: 2.5rem; | |
| } | |
| main section:nth-child(2) p, | |
| main section:nth-child(3) p { | |
| writing-mode: vertical-rl; | |
| text-orientation: sideways; | |
| } | |
| } | |
| /* @media screen and (min-width: 600px) and (max-width: 900px) { */ | |
| @media screen and (width >= 600px) and (width < 900px) { | |
| main section { | |
| flex-basis: 1rem; | |
| } | |
| main section:nth-child(2) { | |
| flex-basis: 60vw; | |
| } | |
| main section:nth-child(2) p { | |
| font-size: 5rem; | |
| } | |
| main section:nth-child(1) p, | |
| main section:nth-child(3) p { | |
| writing-mode: vertical-rl; | |
| text-orientation: sideways; | |
| } | |
| } | |
| /* @media screen and (min-width: 900px) { */ | |
| @media screen and (width >= 900px) { | |
| main section { | |
| flex-basis: 1rem; | |
| } | |
| main section:nth-child(3) { | |
| flex-basis: 60vw; | |
| } | |
| main section:nth-child(3) p { | |
| font-size: 7.5rem; | |
| } | |
| main section:nth-child(1) p, | |
| main section:nth-child(2) p { | |
| writing-mode: vertical-rl; | |
| text-orientation: sideways; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment