"Better" dynamic css. No longer using any media queries. Boxes will take up 90% of the screen on mobile devices, then will max out at 700px.

Font in the header (Practice Projects), will scale from 2.5rem on mobile, to 3rem for larger screens.

Should work for 80-88% of web browsers according to caniuse.com. Should probably provide a fallback

Might in future also scale the body text size too.

notes.md

@@ -50,5 +50,6 @@ Think of it as a combination of learning, and tips and tricks. They will start u
 * https://matthewjamestaylor.com/responsive-banner-ads
 * https://uxengineer.com/padding-vs-margin/
 * http://specificity.keegan.st/
-
-src="blob:https://player.vimeo.com/ff6607bc-2a8d-45ce-9cea-b4a5ddc01ccb"
+* https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
+* https://css-tricks.com/how-do-you-do-max-font-size-in-css/
+* https://css-tricks.com/simplified-fluid-typography/

style.css

@@ -29,13 +29,16 @@ body {
     background-color: rgba(0, 0, 0, 0.1);
     border: 5px solid;
     margin: 0 auto;
-    width: 50%;
+    width: 90%;
+    max-width: 700px;
     box-sizing: border-box;
     border-radius: 10px; 
 }
 
 .blurb, .projectsDiv {
     padding: 10px 20px;
+    margin-top: 2rem;
+    font-family: 'Source Sans Pro', sans-serif;
 }
 
 .header {
@@ -47,18 +50,15 @@ body {
 
 .header > h1 {
     font-family: 'Black Ops One', cursive;
-    font-size: 3rem;
+    /* scale the font from size used on mobile to "desktop" */
+    font-size: min(max(2.5rem, 8vw), 3rem);
 }
 
 .blurb {
-    margin-top: 2rem;
     border-color:  rgba(216, 81, 201, 0.632);
-    font-family: 'Source Sans Pro', sans-serif;
 }
 
 .projectsDiv {
-    margin-top: 2rem;
-    font-family: 'Source Sans Pro', sans-serif;
     border-color: rgba(0, 0, 0, 0.7);
 }
 
@@ -70,8 +70,7 @@ body {
     font-weight: 400;
 }
 
-.frontEndMentorChallenges {
-}
+/* .frontEndMentorChallenges {} */
 
 .frontEndMentorChallenges .newbieChallenges {
     margin-left: 1rem;
@@ -81,12 +80,9 @@ body {
     font-weight: 600;
 }
 
-.freecodeCampProjects {
-}
-.completeWebDev2020Projects {
-}
-.vanillaJSProjects {
-}
+/* .freecodeCampProjects {} */
+/* .completeWebDev2020Projects {} */
+/* .vanillaJSProjects {} */
 
 footer {
     margin-top: 3rem;
@@ -94,7 +90,7 @@ footer {
     font-size: 16px;
     margin-left: auto;
     margin-right: auto;
-
+    width: 85%;
 }
 
 footer * {
@@ -103,18 +99,4 @@ footer * {
 
 footer > a {
     display: block;
-}
-
-@media screen and (max-width: 500px) {
-    .header, .blurb, .projectsDiv {
-        width: 90%;
-    }
-
-    .header > h1 {
-        font-size: 2.5rem;
-    }
-    
-    footer {
-        width: 85%;
-    }
 }