Prevent slick dots from overlapping with slider. #27

omeka · Jul 11, 2024 · fef4df9 · fef4df9
1 parent 665139b
commit fef4df9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/css/sass/_screen.scss b/css/sass/_screen.scss
@@ -1017,17 +1017,14 @@ footer {
 
 #featured .slick-autoplay-toggle-button {
     background-color: transparent;
+    bottom: 0;
 
     &:focus {
         color: $red;
         outline: solid;
     }
 }
 
-#featured .slick-list {
-    padding-bottom: $spacing-l;
-}
-
 #featured .slick-slide {
     min-height: 50vh;
 }
@@ -1037,9 +1034,11 @@ footer {
     width: 100%;
     text-align: center;
     @include de-list;
-    margin: 0;
-    bottom: (-1 * $base-line-height);
-
+    margin: 0 0 0 auto;
+    position: relative;
+    width: calc(100% - 36px);
+    bottom: 0;
+    padding: $spacing-m;
 }
 
 #featured .slick-dots li {

diff --git a/css/style.css b/css/style.css
@@ -1453,17 +1453,13 @@ nav ul {
 @media screen {
   #featured .slick-autoplay-toggle-button {
     background-color: transparent;
+    bottom: 0;
   }
   #featured .slick-autoplay-toggle-button:focus {
     color: #C72E2E;
     outline: solid;
   }
 }
-@media screen {
-  #featured .slick-list {
-    padding-bottom: 24px;
-  }
-}
 @media screen {
   #featured .slick-slide {
     min-height: 50vh;
@@ -1476,8 +1472,11 @@ nav ul {
     text-align: center;
     list-style: none;
     padding: 0;
-    margin: 0;
-    bottom: -24px;
+    margin: 0 0 0 auto;
+    position: relative;
+    width: calc(100% - 36px);
+    bottom: 0;
+    padding: 12px;
   }
 }
 @media screen {