Home > Net >  Bootstrap rows appearing in front of one another in small viewports
Bootstrap rows appearing in front of one another in small viewports

Time：01-28

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 amke 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 >
        
        <div >

            <div >
                <div >
                    

                    <div >
                        <span >Ammount</span>
                        <span >TC</span>
                        <input type="text"  placeholder="select value here" aria-label="Dollar amount (with dot and two decimal places)">
                    </div>

                    <div >
                        <div >
                            2X
                        </div>
                        <div >
                            10X
                        </div>
                        <div >
                            1/2
                        </div>
                        <div >
                             5
                        </div>
                        <div >
                             10
                        </div>
                    </div>

                    <div >
                        <span >
                            Auto stop
                        </span>
                        <input type="text"  placeholder="0.00 format" aria-label="auto stop">
                        
                    </div>

                    <div >
                        <button >Bet</button>
                    
                        <button disabled >Stop</button>
                    </div>
                    

                </div>
                <div >

                    <div >
                                
                                <div  id="wraper">
                                    <div ></div>
                                    <div ></div>
                                    <div ></div>
                                    <div  id="window">
                                        <ul >
                                        </ul>
                                        <ul >
                                            <li ></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 >
                        <div >
                            Last runs:
                        </div>
                        <div >
                            <span >2.37x</span>
                            <span >2.37x</span>
                            <span >2.37x</span>
                            <span >2.37x</span>
                            <span >2.37x</span>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Row for displaying bets -->
            <div >

                <div >
                    <div >
                        <div  style="font-size: large"><span >0 players</span> made their bets</div>

                        <div  style="font-size: larger;"><span >0 TC</span></div>
                    </div>
                </div>

                <div >
                    <div >

                        <table >
                            <thead  style="height: 6vh;">
                                <th >User</th>
                                <th >Bet</th>
                                <th >Multiplier</th>
                                <th >Profit</th>
                            </thead>
                            <tbody>
                                <tr >
                                    <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>

CodePudding user response：

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

<div >

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.

Page link：https//www.codepudding.com/net/279056.html

Prev:How can i disabling scale of cursor by hovering <a>
Next:how to retrieve values ​from html in class li, one by one?
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding