I'm currently working on a frontend project using bootstrap 5, specifically utilizing the grid system to ensure responsiveness across different devices.
However, I've encountered an issue in my code that I can't quite figure out.
The problem arises when I have two rows within a container - everything looks good on desktop view, but on mobile, one row seems to overlap the other:
Desktop:
https://i.sstatic.net/K25vh.png
Mobile:
https://i.sstatic.net/vnKAf.png
Any insights into what might be causing this?
To make the issue more apparent, I've included a condensed version of the code, with the second row using a background color to highlight the problem:
li {
list-style: none;
/* display: inline-block; */
}
.window {
--items-number: 10;
background-color: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
overflow-x: hidden;
position: relative;
width: calc(var(--items-number) * 130px * 100);
height: 180px;
right: 0px;
}
.wraper {
position: relative;
margin: auto;
width: 100%;
overflow-x: hidden;
border-radius: 2px;
}
.roulette-list {
padding-left: 0;
position: relative;
display: flex;
justify-content: flex-start;
margin-bottom: 0;
}
.roulette-list li {
border-radius: 0.8rem;
width: 110px;
height: 100px;
font-size: 3rem;
font-weight: bolder;
color: rgba(255, 255, 255, 0.5);
margin: 0 25px 0 0;
display: flex;
justify-content: center;
align-items: center;
}
.roulette-list li:nth-child(even) {
background-color: #262833;
color: #fff;
}
.roulette-list li:nth-child(odd) {
background-color: #b927ad;
color: #262833;
}
...