From 297bed46bb76d70b62b77d462d6ccdf13276df9a Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Tue, 8 Nov 2022 23:06:08 +0000
Subject: [PATCH] some final tweaking so it looks better between sizes

---
 .../css/styles.css                            | 14 ++++++--
 .../skilled-elearning-landing-page/index.html | 35 +++++--------------
 2 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css
index 3202eae..18f78b7 100644
--- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css
+++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css
@@ -174,6 +174,11 @@ body {
 }
 .hero_img {
 }
+
+main {
+    margin-inline: auto;
+}
+
 .cards {
     display: flex;
     flex-direction: column;
@@ -181,6 +186,10 @@ body {
     margin-top: -1.125rem;
     margin-inline: 1rem;
     gap: 2.375rem;
+
+    justify-content: center;
+
+    max-width: 70rem;
 }
 .card {
     border-radius: 0.625rem;
@@ -252,7 +261,7 @@ body {
     background: var(--col-purple-to-pink-hover);
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
     header {
         position: relative;
         overflow: hidden;
@@ -317,7 +326,8 @@ body {
     }
 }
 
-@media screen and (min-width: 1440px) {
+@media screen and (min-width: 90rem) {
+    /* 1440px */
     :root {
         --fs-heading-m: 2rem;
         --lh-heading-m: 2.5rem;
diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html
index 62857ea..91ac500 100644
--- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html
+++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html
@@ -38,40 +38,21 @@
       </div>
 
       <picture class="intro__image">
-        <source media="(min-width: 1440px)"
-          srcset="assets/image-hero-desktop@2x.webp 2x, assets/image-hero-desktop.webp" type="image/webp">
-        <source media="(min-width: 1440px)" srcset="assets/image-hero-desktop@2x.png 2x, assets/image-hero-desktop.png">
-        <source media="(min-width: 768px)" srcset="assets/image-hero-tablet@2x.webp 2x, assets/image-hero-tablet.webp"
+        <source media="(min-width: 90rem)" srcset="assets/image-hero-desktop@2x.webp 2x, assets/image-hero-desktop.webp"
           type="image/webp">
-        <source media="(min-width: 768px)" srcset="assets/image-hero-tablet@2x.png 2x, assets/image-hero-tablet.png">
-        <source media="(max-width: 767px)" srcset="assets/image-hero-mobile@2x.webp 2x, assets/image-hero-mobile.webp"
+        <source media="(min-width: 90rem)" srcset="assets/image-hero-desktop@2x.png 2x, assets/image-hero-desktop.png">
+        <source media="(min-width: 48rem)" srcset="assets/image-hero-tablet@2x.webp 2x, assets/image-hero-tablet.webp"
           type="image/webp">
-        <source media="(max-width: 767px)" srcset="assets/image-hero-mobile@2x.png 2x, assets/image-hero-mobile.png">
+        <source media="(min-width: 48rem)" srcset="assets/image-hero-tablet@2x.png 2x, assets/image-hero-tablet.png">
+        <source media="(max-width: 47.9375rem)"
+          srcset="assets/image-hero-mobile@2x.webp 2x, assets/image-hero-mobile.webp" type="image/webp">
+        <source media="(max-width: 47.9375rem)"
+          srcset="assets/image-hero-mobile@2x.png 2x, assets/image-hero-mobile.png">
 
-        <!-- // fallback in different sizes, as well as regular src. -->
-        <!-- mobile image 435x409, page 327x301
-            x2 870x818
-          tablet: 695x723, on page 640.71x640
-            x2 1390x1446
-          desktop: 1046x938, page 991.63x936.92
-            x2 2092x1876 -->
-
-        <!-- either widths, or pixel density 327-->
-        <!-- <img src="assets/logo-dark.svg" srcset="
-        assets/image-hero-mobile.png 435w,
-        assets/image-hero-tablet.png 695w,
-        assets/image-hero-desktop.png 1046w" sizes="
-              (max-width: 767px) 87vw,
-              (max-width: 1439px) 83vw,
-              (max-width: 2000px) 870px,
-              1000px"
-          alt="Woman blowing onto a mug. Top right of her is a box indicating 29k Members. On the bottom right is a box indicating 1,451 Course Hours."
-          class=""> -->
         <img class="hero_img" src="assets/image-hero-mobile.png"
           srcset="assets/image-hero-mobile.png, assets/image-hero-mobile@2x.png 2x"
           alt="Woman blowing onto a mug. Top right of her is a box indicating 29k Members. On the bottom right is a box indicating 1,451 Course Hours.">
 
-
       </picture>
 
     </div>