Element should remain same on window resize

Question

I'm having a hard time fixing the issue. My webpage consists of two divs with 25% and 60% of the width aligned side by side. The right div has cards inside (made it using Bootstrap 5).

Have a look at the following image. I want it like this in every viewport.

I want the entire UI to remain the same when the user resizes the window meaning that the width of the first div remains 25% and the second div remains 60% in all viewports. One more thing, I want to get rid of the Display: flex property when the window resizes so that the cards inside the div remain in a row or something else needs to be done instead of flex property.

My current display: 1920 * 1080.

I've seen many questions related to mine but I'm unable to fix this problem. Can anyone help with this one? I am new to this platform, I hope I made it clear what my problem is.

@import url("https://fonts.googleapis.com/css2?family=Bungee+Outline&display=swap");
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: url(/assets/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 100vh;
  width: 100%;
  color: white !important;
}

@font-face {
  font-family: myFont;
  src: url(/assets/myFont.ttf);
}

@font-face {
  font-family: mainFont;
  src: url(/assets/mainFont.otf);
}


/* .main {
 
} */

.main-row:after {
  content: "";
  display: table;
  clear: both;
}

.logo {
  height: 120px;
  width: 130px;
  position: absolute;
  top: 2%;
  left: 60%;
}

.border-radius-2 {
  border-radius: 2rem !important;
}

.fs-4 {
  font-size: 4rem !important;
}

.fs-25 {
  font-size: 20px !important;
}


/* MAIN COLS */

.column {
  float: left;
  height: 100%;
  margin-top: 7rem;
}

.column:not(.col-right) {
  margin-right: 4rem;
}


/* COLUMN LEFT */

.col-left {
  width: 25%;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5242471988795518) 53%, rgba(255, 8, 24, 0.6895133053221288) 100%);
}

.rangliste {
  font-family: myFont !important;
  font-size: 75px !important;
  color: rgba(255, 0, 0, 0.602);
  padding: 0.5rem 1rem;
}

.front-text {
  position: fixed;
  top: 14.5%;
  left: 14%;
  font-family: mainFont;
}

.col-left-child {
  background-color: black;
  margin: 30px !important;
}


/* COLUMN RIGHT */

.col-right {
  width: 60%;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5242471988795518) 53%, rgba(255, 8, 24, 0.6895133053221288) 100%);
  /* z-index: 9999; */
}

.col-right-child-bottom .new-row {
  --bs-gutter-x: -10.5rem !important;
}

.row-two:not(.row-one) {
  margin-top: 2rem;
}

.card-right-col {
  background-color: Black !important;
  border: none !important;
  border-radius: 2rem !important;
  width: 16rem !important;
  height: 18rem !important;
}

.card-right-col img {
  border-top-left-radius: 2rem !important;
  border-top-right-radius: 2rem !important;
  filter: grayscale(100%);
}


/* BUTTONS */

.btn-danger {
  background-color: rgba(255, 0, 0, 0.274) !important;
  border: none !important;
  color: red !important;
  font-weight: 600 !important;
}

.btn-red {
  padding: 0.2rem 2.5rem !important;
  border-radius: 1rem !important;
}

.card-btn {
  padding: 0 1rem !important;
  border-radius: 0.5rem !important;
}

.btn-success {
  background-color: rgba(4, 104, 4, 0.493) !important;
  border: none !important;
  border-radius: 1rem !important;
  color: rgba(5, 212, 5, 0.842) !important;
  font-weight: 600 !important;
  padding: 0.2rem 3rem !important;
}


/* ICONS */

.fa-circle {
  color: rgb(5, 212, 5) !important;
}


/* TABLE */

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  padding: 8px;
}

td {
  width: 25%;
  color: rgb(216, 212, 212);
}

td:not(:nth-child(3)) {
  border-right: 1px solid rgba(238, 238, 238, 0.185) !important;
}

th:not(:nth-child(3)) {
  border-right: 1px solid rgba(238, 238, 238, 0.185) !important;
}

.active-card {
  border: 1px solid red !important;
}





  
  
  
  HEX FFA
  
  
  
  
  
  
  



  
    
    

    
      
      
        
          RANGLISTE
        
        
          Rangliste
        
        
        
          
            
              
        
        
          
            
            
              
                HEX FFA
                Karte auswählen
              
            
            
              
                
              
            
          
        
        
        
          
            
              
                
                  
                  
                    
                      
                        
                          würfelpark
                        
                         
                      
                    
                      Spieler : 15
                  
                
              
              
                
                  
                  
                    
                      
                        
                          würfelpark
                        
                         
                      
                    
                      Spieler : 15
                  
                
              
              
                
                  
                  
                    
                      
                        
                          würfelpark
                        
                         
                      
                    
                      Spieler : 15
                  
                
              
            
          
          
            
              
                
                  
                  
                    
                      
                        
                          würfelpark
                        
                         
                        
                      
                    
                      Spieler : 15
                  
                
              
              
                
                  
                  
                    
                      
                        
                          würfelpark
                        
                         
                        
                      
                    
                      Spieler : 15
                  
                
              
              
                
                  
                  
                    
                      
                        
                          würfelpark
                        
                        
                          
                        
                      
                    
                      Spieler : 15
                  
                
              
            
          

          
            
          
        
      
I'm facing this on window resize:

                
                  Spieler
                  Kills
                  K/D
                
                
                  Movas
                  1337
                  0.5
                
                
                  Movas
                  1337
                  0.5
                
                
                  Movas
                  1337
                  0.5

Element should remain same on window resize

0 Answers