'Bootstrap rows appearing in front of one another in small viewports
I am developing a frontend using bootstrap 5. I'm using the grid system to make the site responsive overall.
There's an issue that I can't really understand with my code.
I've set up two rows inside of a container, they work fine in a desktop display, but when I change to a cellphone viewport, one of the rows appears in front of the other:
Desktop:
Cellphone:
Does anyone have an idea of what is going on here?
I have added a smaller version of the code, with the second row using a bg-dark to make the problem clearer:
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;
}
.roulette-list-past {
padding-left: 0;
position: relative;
display: flex;
justify-content: flex-start;
margin-bottom: 0;
}
.roulette-list-past li {
border-radius: 0.8rem;
width: 40px;
height: 40px;
font-size: 1.5rem;
font-weight: bolder;
color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.roulette-list-past li:nth-child(even) {
background-color: #262833;
color: #fff;
}
.roulette-list-past li:nth-child(odd) {
background-color: #b927ad;
color: #262833;
}
.vegaz-roulette {
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-color: #fff !important;
}
.arrowup {
position: absolute;
bottom: 30px;
right: calc(50% - 10px);
z-index: 1;
width: 0;
height: 0;
border-bottom: 15px solid #f3f705;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
display: none;
}
.line {
position: absolute;
bottom: 16px;
right: calc(50% + 3px);
z-index: 1;
width: 5px;
border-radius: 5px;
background-color: #fff;
height: 150px;
}
.arrowdown {
position: absolute;
top: 30px;
right: calc(50% - 10px);
z-index: 1;
width: 0;
height: 0;
border-top: 15px solid #f3f705;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
display: none;
}
@keyframes choosen {
0% {
transform: scale(1);
}
75% {
transform: scale(1.2);
}
}
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
--top-header-top-position: 1.5rem;
--header-height: 3rem;
--nav-width: 68px;
--chat-width: 100px;
--primary-color: var(--bs-primary);
--secondary-color: var(--bs-secondary);
--field-gray: var(--bs-field-grey);
--field-grey-transparency: var(--bs-field-grey-transparency);
--white-color: var(--bs-white);
--body-font: 'Montserrat', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 100;
--z-topbar: 101;
}
*,
::before,
::after {
box-sizing: border-box
}
.top-header {
width: 100%;
height: var(--top-header-top-position);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--secondary-color);
z-index: var(--z-topbar);
transition: .5s;
text-align: center !important;
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: var(--top-header-top-position);
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--primary-color);
z-index: var(--z-fixed);
transition: .5s
}
.main-container-page {
padding-top: calc(var(--header-height) + var(--top-header-top-position) + 5rem);
z-index: 5000;
}
.header_toggle {
color: var(--primary-color);
font-size: 1.5rem;
cursor: pointer
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--primary-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed)
}
.r-navbar {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
background-color: var(--primary-color);
padding: 1rem 0 0 1rem;
transition: .5s;
z-index: var(--z-fixed);
padding: 1rem 0 0 1rem;
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
margin-top: 5rem;
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem;
text-decoration: none;
}
.nav_logo {
margin-bottom: 2rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link {
position: relative;
color: var(--white-color);
margin-bottom: 1.5rem;
transition: .3s
}
.nav_link:hover {
color: var(--white-color)
}
.nav_icon {
font-size: 1.25rem;
}
.secondary-bs-color {
color: var(--bs-secondary)
}
.white-bs-color {
color: var(--white-color)
}
.show-left-nav {
left: 0;
width: calc(var(--nav-width) + 156px);
}
.show-right-nav {
width: 100%;
}
.body-menu-pd {
padding-left: calc(var(--nav-width) + 188px);
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 1rem);
}
.chat-font {
font-size: small;
}
.time-span-chat {
font-size: smaller;
color: var(--white-color);
}
#chatContainer {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
#chatContainer::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
.active {
color: var(--white-color)
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color)
}
.height-100 {
height: 100vh
}
.float-icon-chat {
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: var(--secondary-color);
color: var(--white-color);
border-radius: 50px;
text-align: center;
vertical-align: middle;
z-index: 100;
}
.coin-dropdown-item {
color: var(--white-color);
}
.coin-dropdown-item:hover {
color: var(--secondary-color);
background-color: var(--field-grey-transparency);
font-weight: bold;
}
@media screen and (min-width: 768px) {
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.r-navbar {
right: 0;
padding: 1rem 0 0 1rem;
width: 0;
}
.show-left-nav {
width: calc(var(--nav-width) + 156px)
}
.show-right-nav {
width: calc(var(--chat-width) + 156px)
}
.body-menu-pd {
padding-left: calc(var(--nav-width) + 188px);
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 156px)
}
}
/* Media queries for conditional borders on games */
.game-col {
border-left: none;
}
.game-block {
border-bottom: none;
}
.game-top {
border-top: 1px solid var(--white-color);
}
@media (min-width: 576px) {
.game-col {
border-left: 1px solid var(--white-color);
}
.game-block {
border-bottom: 1px solid var(--white-color);
}
.game-top {
border-top: none;
}
}
/* crash game */
.crash-canvas {
height: 90%;
width: 100%;
max-width: 750px;
border-radius: 7px;
background-color: #0f1923;
margin: 0rem auto 2rem auto;
}
.game-row-height {
height: 200px;
}
@media (min-width: 576px) {
.game-row-height {
height: 500px;
}
}
/* betting menu */
.bet-menu-buttons {
width: 7vh;
height: 7vh;
}
.bettor-table-item {
border-bottom: 1px solid var(--white-color);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
<script defer src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body id="body-pd">
<!--Container Main start-->
<div class="height-100 main-container-page">
<div class="container h-100">
<div class="row gx-0 game-row-height">
<div class="col-12 col-sm-5 order-sm-1 order-2 bg-opacity-white bg-opacity-25 text-center game-top ps-5 pe-5 d-flex flex-column justify-content-evenly">
<div class="input-group mb-3">
<span class="border-0 bg-field-grey text-white fw-bold input-group-text">Amount</span>
<span class="border-0 bg-field-grey text-white fw-bold input-group-text">TC</span>
<input type="text" class="border-0 bg-field-grey text-white form-control" placeholder="select value here" aria-label="Dollar amount (with dot and two decimal places)">
</div>
<div class="d-flex justify-content-evenly align-items-center">
<div class="bet-menu-buttons bg-primary text-white fw-bold border border-primary border-4 rounded ms-2 me-2">
2X
</div>
<div class="bet-menu-buttons bg-primary text-white fw-bold border border-primary border-4 rounded ms-2 me-2">
10X
</div>
<div class="bet-menu-buttons bg-primary text-white fw-bold border border-primary border-4 rounded ms-2 me-2">
1/2
</div>
<div class="bet-menu-buttons bg-primary text-white fw-bold border border-primary border-4 rounded ms-2 me-2">
+5
</div>
<div class="bet-menu-buttons bg-primary text-white fw-bold border border-primary border-4 rounded ms-2 me-2">
+10
</div>
</div>
<div class="d-flex flex-column justify-content-evenly align-items-center">
<span class="text-white fw-bold mb-2">
Auto stop
</span>
<input type="text" class="border-0 bg-field-grey text-white form-control border border-field-grey rounded-pill" placeholder="0.00 format" aria-label="auto stop">
</div>
<div class="d-flex flex-column mt-5">
<button class="btn btn-secondary fw-bold border border-secondary rounded-pill">Bet</button>
<button disabled class="btn btn-secondary fw-bold border border-secondary rounded-pill mt-5">Stop</button>
</div>
</div>
<div class="col-12 col-sm-7 order-sm-2 order-1 bg-opacity-white bg-opacity-25 text-center game-col">
<div class="d-flex h-80 game-block pt-4 ps-4 pe-4">
<div class="wraper" id="wraper">
<div class="arrowup"></div>
<div class="arrowdown"></div>
<div class="line"></div>
<div class="window" id="window">
<ul class="roulette-list">
</ul>
<ul class="roulette-list">
<li class="vegaz-roulette"></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
</ul>
</div>
</div>
</div>
<div class="d-flex flex-column h-35 game-top ps-3 pt-3 pb-5">
<div class="d-flex text-white fw-bold ms-1 mb-2">
Last runs:
</div>
<div class="d-flex justify-content-start">
<span class="badge bg-primary ms-1 me-1">2.37x</span>
<span class="badge bg-primary ms-1 me-1">2.37x</span>
<span class="badge bg-primary ms-1 me-1">2.37x</span>
<span class="badge bg-primary ms-1 me-1">2.37x</span>
<span class="badge bg-primary ms-1 me-1">2.37x</span>
</div>
</div>
</div>
</div>
<!-- Row for displaying bets -->
<div class="row mt-5 gx-0 bg-dark">
<div class="col-12 mt-3 mb-3">
<div class="d-flex justify-content-between">
<div class="text-secondary ms-5" style="font-size: large"><span class="fw-bold">0 players</span> made their bets</div>
<div class="text-white me-5" style="font-size: larger;"><span class="fw-bold">0 TC</span></div>
</div>
</div>
<div class="col-12">
<div class="d-flex justify-content-center">
<table class="table-primary table-borderless w-90">
<thead class="text-white fw-bold bg-field-grey" style="height: 6vh;">
<th class="w-70">User</th>
<th class="w-10">Bet</th>
<th class="w-10">Multiplier</th>
<th class="w-10">Profit</th>
</thead>
<tbody>
<tr class="bettor-table-item text-white fw-bold">
<td>
Elon musk
</td>
<td>15 TC</td>
<td>4.00x</td>
<td>60 TC</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--Container Main end-->
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|