tandem
/
camper
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Avoid horizontal scroll due to slick’s right margin 

I can use overflow for that in most sizes, but on mobile the buttons
are outside the overflow and are not visible, thus have to revert it
and then remove the right margin to avoid the extra space.  Since on
mobile we only show a single slide at a time, the lack of margin is not
noticeable.
This commit is contained in:
jordi fita mas 2024-02-03 01:11:21 +01:00
parent de03443c25
commit 244cbeddac
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/static/public.css
View File

@ -615,6 +615,7 @@ dl, .nature > div, .outside_activities > div, .campsite_info {
.carousel { .carousel {
display: none; display: none;
overflow: hidden;
} }
.carousel .spiel { .carousel .spiel {
@ -626,7 +627,7 @@ dl, .nature > div, .outside_activities > div, .campsite_info {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.carousel .spiel, .carousel figure, .carousel .slick-track > img { .carousel .slick-slide {
margin-right: 5rem; margin-right: 5rem;
position: relative; position: relative;
} }
@ -671,6 +672,9 @@ dl, .nature > div, .outside_activities > div, .campsite_info {
@media (max-width: 48rem) { @media (max-width: 48rem) {
.carousel {
overflow: unset;
}
.carousel .slick-arrow { .carousel .slick-arrow {
background: var(--accent); background: var(--accent);
@ -681,6 +685,11 @@ dl, .nature > div, .outside_activities > div, .campsite_info {
.carousel .slick-list { .carousel .slick-list {
padding-top: 2rem; padding-top: 2rem;
} }
.carousel .slick-list,
.carousel .slick-slide {
margin-right: 0;
}
} }
.slick-slider .slick-prev { .slick-slider .slick-prev {