tweaked section padding if there is not a background

wbraden · Aug 10, 2024 · 24c7e7e · 24c7e7e
1 parent e86c7f6
commit 24c7e7e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 24 deletions.
diff --git a/css/main.css b/css/main.css
@@ -470,10 +470,14 @@ img.avatar {
 
 section {
   width: 100%;
-  padding: 2rem 0;
+  padding: 0;
+  padding-bottom: 2rem;
   container-type: inline-size;
   container-name: section;
 }
+section.has-background {
+  padding: 2rem 0;
+}
 section-header img {
   max-width: 375px;
   width: 100%;
@@ -879,7 +883,7 @@ button {
   .pagination {
     display:none;
   }
-  h1 {
-    margin-top: 1rem !important;
+  .greetings {
+    margin: 1rem 0;
   }
 }
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
         cart-count="21"
     ></custom-navbar>
 
-    <div class="container">
+    <div class="container greetings">
         <h1 class="typography headline xl">Good morning, Amanda</h1>
     </div>
 
@@ -189,7 +189,7 @@ <h1 class="typography headline xl">Good morning, Amanda</h1>
 
     <!-- Include other sections as needed -->
 
-    <section class="colorize">
+    <section class="colorize has-background">
         <div class="container">
             <div class="swiper wb-swiper-2">
                 <section-header avatar="https://object-storage.shipt.com/stores/27-061819185725_4aa474376b672e5e20d95db190d54ca5.png?fio=true&auto=webp&format=pjpg&quality=75%2C75&width=64" alt="Target">

diff --git a/retailer.html b/retailer.html
@@ -284,7 +284,7 @@
     </section>
 
     <!-- Image header and color bg -->
-    <section class="colorize-red">
+    <section class="colorize-red has-background">
       <div class="container">
         <div class="swiper wb-swiper-5">
           <section-header alt="Target" display-type="image">
@@ -659,7 +659,7 @@
 
     <!-- Image BG -->
     <section
-      class="surface-dark"
+      class="surface-dark has-background"
       style="background-image: url(assets/grass.png)"
     >
       <div class="container">
@@ -864,11 +864,11 @@
           freemode: true,
           spaceBetween: 8,
           breakpoints: {
-            480: { freemode: true, slidesPerView: 3.25, slidesPerGroup: 3 },
-            768: { freemode: true, slidesPerView: 5.25, slidesPerGroup: 5 },
-            1280: { freemode: false, slidesPerView: 6, slidesPerGroup: 6 },
-            1440: { freemode: false, slidesPerView: 7, slidesPerGroup: 7 },
-            1880: { freemode: false, slidesPerView: 8, slidesPerGroup: 8 },
+            480: { slidesPerView: 3.25, slidesPerGroup: 3 },
+            768: { slidesPerView: 5.25, slidesPerGroup: 5 },
+            1280: { slidesPerView: 6, slidesPerGroup: 6 },
+            1440: { slidesPerView: 7, slidesPerGroup: 7 },
+            1880: { slidesPerView: 8, slidesPerGroup: 8 },
           },
           navigation: { nextEl: ".wb-next-1", prevEl: ".wb-prev-1" },
         });
@@ -881,11 +881,11 @@
           freemode: true,
           spaceBetween: 8,
           breakpoints: {
-            480: { freemode: true, slidesPerView: 3.25, slidesPerGroup: 3 },
-            768: { freemode: true, slidesPerView: 5, slidesPerGroup: 5 },
-            1280: { freemode: false, slidesPerView: 6, slidesPerGroup: 6 },
-            1440: { freemode: false, slidesPerView: 7, slidesPerGroup: 7 },
-            1880: { freemode: false, slidesPerView: 8, slidesPerGroup: 8 },
+            480: { slidesPerView: 3.25, slidesPerGroup: 3 },
+            768: { slidesPerView: 5, slidesPerGroup: 5 },
+            1280: { slidesPerView: 6, slidesPerGroup: 6 },
+            1440: { slidesPerView: 7, slidesPerGroup: 7 },
+            1880: { slidesPerView: 8, slidesPerGroup: 8 },
           },
           navigation: { nextEl: ".wb-next-2", prevEl: ".wb-prev-2" },
         });
@@ -897,11 +897,11 @@
           freemode: true,
           spaceBetween: 8,
           breakpoints: {
-            480: { freemode: true, slidesPerView: 1.1, slidesPerGroup: 1.5 },
-            768: { freemode: true, slidesPerView: 2.25, slidesPerGroup: 2.25 },
-            1280: { freemode: false, slidesPerView: 3, slidesPerGroup: 3 },
-            1440: { freemode: false, slidesPerView: 4, slidesPerGroup: 4 },
-            1880: { freemode: false, slidesPerView: 4, slidesPerGroup: 4 },
+            480: { slidesPerView: 1.1, slidesPerGroup: 1.5 },
+            768: { slidesPerView: 2.25, slidesPerGroup: 2.25 },
+            1280: { slidesPerView: 3, slidesPerGroup: 3 },
+            1440: { slidesPerView: 4, slidesPerGroup: 4 },
+            1880: { slidesPerView: 4, slidesPerGroup: 4 },
           },
           navigation: { nextEl: ".wb-next-4", prevEl: ".wb-prev-4" },
         });
@@ -914,8 +914,8 @@
           spaceBetween: 8,
           freemode: true,
           breakpoints: {
-            480: { freemode: true, slidesPerView: 3, slidesPerGroup: 3 },
-            768: { freemode: true, slidesPerView: 5, slidesPerGroup: 5 },
+            480: { slidesPerView: 3, slidesPerGroup: 3 },
+            768: { slidesPerView: 5, slidesPerGroup: 5 },
             1280: { slidesPerView: 6, slidesPerGroup: 6 },
             1440: { slidesPerView: 6, slidesPerGroup: 7 },
             1880: { slidesPerView: 8, slidesPerGroup: 8 },