Fixes for carousel on narrow screens
Signed-off-by: nicolatimeus <nicola.timeus@eurotech.com>
diff --git a/content/css/style.css b/content/css/style.css
index 9fbb59b..347d55c 100644
--- a/content/css/style.css
+++ b/content/css/style.css
@@ -55,25 +55,34 @@
/* CAROUSEL */
.carousel-inner .item {
- height: 500px !important;
text-align: center !important;
- overflow: hidden !important;
+ height: 500px !important;
}
+
.carousel-inner img {
- height: 100% !important;
- width: auto !important;
+ max-height: 100% !important;
+ max-width: 100% !important;
display: inline !important;
}
+
+@media (max-aspect-ratio: 1/1) {
+ .carousel-inner .item {
+ height: 56vw !important;
+ }
+}
+
.carousel {
background-color: rgb(247,247,247) !important;
border: solid 1px rgb(203,203,203) !important;
}
+
.carousel-control {
color: black !important;
background-image: initial !important;
opacity: 0.8;
transition: opacity 0.25s;
}
+
.carousel-control:hover {
opacity: 0.6;
}
diff --git a/content/images/wires_example.png b/content/images/wires_example.png
index 8e37698..0d21025 100644
--- a/content/images/wires_example.png
+++ b/content/images/wires_example.png
Binary files differ