krzysztof/landing_page
1
0
Fork 0
mirror of https://github.com/qdrant/landing_page.git synced 2026-10-03 09:58:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix healthcare slider responciveness (#2162)

Browse Source
This commit is contained in:
trean
2026-02-20 18:09:53 +01:00
committed by GitHub
parent d7b58e3813
commit 0e508a9fcf
1 changed files with 48 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
qdrant-landing/themes/qdrant-2024/assets/css/partials/healthcare/_healthcare-use-cases.scss
+48 -2
View File
@@ -21,6 +21,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap;
position: relative; position: relative;
background-color: $neutral-98; background-color: $neutral-98;
border: 1px solid $neutral-90; border: 1px solid $neutral-90;
@@ -28,7 +29,13 @@
padding: pxToRem(4); padding: pxToRem(4);
margin: 0 auto $spacer * 4; margin: 0 auto $spacer * 4;
width: fit-content; width: fit-content;
max-width: 100%;
overflow: hidden; overflow: hidden;
@media (max-width: 767px) {
flex-direction: column;
width: 100%;
}
} }
&__tab { &__tab {
@@ -45,6 +52,7 @@
cursor: pointer; cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease; transition: color 0.3s ease, background-color 0.3s ease;
white-space: nowrap; white-space: nowrap;
text-align: center;
&:hover { &:hover {
color: $neutral-40; color: $neutral-40;
@@ -56,6 +64,11 @@
background-color: $white; background-color: $white;
box-shadow: 0 pxToRem(2) pxToRem(8) rgba($neutral-20, 0.1); box-shadow: 0 pxToRem(2) pxToRem(8) rgba($neutral-20, 0.1);
} }
@media (max-width: 767px) {
width: 100%;
text-align: left;
}
} }
&__slider { &__slider {
@@ -63,14 +76,17 @@
margin-bottom: $spacer * 4; margin-bottom: $spacer * 4;
min-height: pxToRem(560); min-height: pxToRem(560);
overflow: hidden; overflow: hidden;
@media (max-width: 991px) {
min-height: pxToRem(800);
}
} }
&__slide { &__slide {
position: absolute; position: absolute;
top: 50%; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
transform: translateY(-50%);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease; transition: opacity 0.4s ease, visibility 0.4s ease;
@@ -81,6 +97,11 @@
visibility: visible; visibility: visible;
pointer-events: auto; pointer-events: auto;
} }
@include media-breakpoint-up(lg) {
top: 50%;
transform: translateY(-50%);
}
} }
&__card { &__card {
@@ -99,6 +120,12 @@
padding-right: pxToRem(40); padding-right: pxToRem(40);
padding-top: pxToRem(80); padding-top: pxToRem(80);
} }
@media (min-width: 992px) and (max-width: 1199px) {
padding-left: pxToRem(40);
padding-right: pxToRem(24);
padding-top: pxToRem(48);
}
} }
&__card-visual { &__card-visual {
@@ -118,6 +145,13 @@
height: auto; height: auto;
padding: 0; padding: 0;
} }
@media (min-width: 992px) and (max-width: 1199px) {
left: pxToRem(24);
top: 50%;
transform: translateY(-50%);
width: pxToRem(220);
}
} }
&__card-visual-img { &__card-visual-img {
@@ -131,6 +165,11 @@
max-width: pxToRem(300); max-width: pxToRem(300);
max-height: pxToRem(400); max-height: pxToRem(400);
} }
@media (min-width: 992px) and (max-width: 1199px) {
max-width: pxToRem(200);
max-height: pxToRem(280);
}
} }
&__card-content { &__card-content {
@@ -152,6 +191,13 @@
max-width: pxToRem(620); max-width: pxToRem(620);
min-width: pxToRem(500); min-width: pxToRem(500);
} }
@media (min-width: 992px) and (max-width: 1199px) {
margin-left: pxToRem(244);
min-width: 0;
max-width: none;
flex: 1;
}
} }
&__card-texture { &__card-texture {