diff --git a/assets/sass/carousel.scss b/assets/sass/carousel.scss index aace3d9..96186b7 100644 --- a/assets/sass/carousel.scss +++ b/assets/sass/carousel.scss @@ -123,6 +123,7 @@ $height: 30rem; font-size: .9rem; opacity: 0.9; text-align: center; + margin-top: 1rem; } } } @@ -277,7 +278,7 @@ $height: 30rem; } @media (max-width: $md-breakpoint) { - $md-height: 45rem; + $md-height: 47rem; .carousel { height: $md-height !important; } @@ -286,7 +287,7 @@ $height: 30rem; .carousel::after, .carousel__prev, .carousel__next { - transform: translateY($md-height/2 - 2rem) !important; + transform: translateY($md-height - 4.5rem) !important; } .carousel::next { @@ -334,11 +335,17 @@ $height: 30rem; .image-container { display: flex; justify-content: center; - padding-top: 2rem; + padding-top: 1rem; + } + + .slide-content { + .page-container { + padding: 0 1.5rem; + } } .slide-image { - height: 19rem; + height: 20rem; img { width: auto; height: 100%; @@ -346,3 +353,14 @@ $height: 30rem; } } } + +@media (max-width: $sm-breakpoint) { + .carousel { + .image-container { + padding-top: 0rem; + } + .slide-image { + height: 13rem; + } + } +} diff --git a/assets/sass/general.scss b/assets/sass/general.scss index a5223f4..07ec423 100644 --- a/assets/sass/general.scss +++ b/assets/sass/general.scss @@ -84,6 +84,7 @@ a:hover { img { max-width: 100%; + object-fit: contain; } .grid { @@ -93,9 +94,6 @@ img { grid-template-columns: 1fr 1fr; } -.btn { -} - .wikipedia-btn { margin-top: .5rem;