htmlcssbootstrap-4grid-system

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:

enter image description here

Cellphone:

enter image description here

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

Solution

  • The problem is in the class game-row-height in the first row

    <div class="row gx-0 game-row-height">

    In your CSS you're setting your row's height to be 500px if your browser's viewport width is at least 576px, that's not a problem because all the content fits just well inside that height.

    .game-row-height {
    height: 200px;
}

@media (min-width: 576px) {  
    .game-row-height {
        height: 500px;
    }
}

    However, in cellphone viewport the width is less than 576px and your row height is set to 200px. The content does not fit in that height. The row for displaying bets is taking a virtual 200px height first row as reference to position itself, while the actual size of the first row is different because it has to stretch to fit all the content, hence the "overlapping". something like this

    I would increase the initial height in your CSS or completely remove that class and let the height adapt to the content and viewport, since you're using Bootstrap (already responsive) removing the class is best.