So this is one of those odd ones I’ve ran into in the past where what seems like a simple fix may work on one browser but doesn’t for others. It’s not a box-sizing thing and has to do with overflow in a way I’ve not found a “clean” solution for, so I throw in a hack until a rockstar like maybe our buddy @TemaniAfif might come along and teach us both something handy and more semantically elegant, but this works, cheers!
body {
margin: 0;
border: 1px solid gray;
}
.carousel {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
padding: 1rem;
max-width: 100vw;
}
.carousel .wahl-box {
background-color: #5a3982;
border-radius: 2px;
transition: transform .3s, box-shadow .3s, width .3s, flex-basis .3s;
scroll-snap-align: center;
min-width: calc(100vw - 6rem);
margin: 1rem .5rem;
display: block;
position: relative;
}
.wahl-box:last-of-type:after {
content: '';
display: block;
position: absolute;
right: -1.5rem;
top: 0;
width: 1.5rem;
height: 100%;
}
.carousel .wahl-box.active {
box-shadow: 0 1px 16px 0 rgba(76, 137, 130, 0.62);
transform: scale(1.1, 1.1);
margin: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" class="carousel">
<label class="d-block p-4 wahl-box text-white text-center " for="wahl_rente">
<h2>Card 1</h2>
<input class="d-none" type="radio" name="leistungswahl" id="wahl_rente" value="RENTE">
</label>
<label class="d-block p-4 wahl-box text-white text-center " for="wahl_kapital">
<h2>Card 2</h2>
<input class="d-none" type="radio" name="leistungswahl" id="wahl_kapital" value="KAPITAL">
</label>
</form>
I built a swiper with two cards in it. On mobile devices only one card is in the viewport. The second card is truncated on the right. When I swipe to the left the second card appears in the viewport and the first card is truncated on the left.
All of this is just working fine. The only thing that doesn’t work is the distance on the right when the second card is in the viewport. I tried a margin on the second card, a padding on the parent element. Nothing seems to work. I want the card appear from the very right edge of the viewport. But when it is fully there it should have a distance to the edge, like there is on the left.
body {
margin: 0;
border: 1px solid gray;
}
.carousel {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
padding: 1rem;
max-width: 100vw;
}
.carousel .wahl-box {
background-color: #5a3982;
border-radius: 2px;
transition: transform .3s, box-shadow .3s, width .3s, flex-basis .3s;
scroll-snap-align: center;
min-width: calc(100vw - 6rem);
margin: 1rem .5rem;
display: block;
}
.carousel .wahl-box.active {
box-shadow: 0 1px 16px 0 rgba(76, 137, 130, 0.62);
transform: scale(1.1, 1.1);
margin: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" class="carousel">
<label class="d-block p-4 wahl-box text-white text-center " for="wahl_rente">
<h2>Card 1</h2>
<input class="d-none" type="radio" name="leistungswahl" id="wahl_rente" value="RENTE">
</label>
<label class="d-block p-4 wahl-box text-white text-center " for="wahl_kapital">
<h2>Card 2</h2>
<input class="d-none" type="radio" name="leistungswahl" id="wahl_kapital" value="KAPITAL">
</label>
</form>
Thank you for your answer. I also thought about this solution and it was the only one I could come up with. But like you I also thought there must be a more elegant way to solve this. Afterwards a colleague found this blog post with the same solution:
