Content of the page overrides on one another

Hi Friends,

Content of my webpage (left content and right side box ) overrides when I shrink the size of the window. I want the right side content stay fixed as it is even when the window size is small. Please help.

Can you provide the code through codepen .? With only visual it’s not easy to point out anything.

html -->

 <div class="row" >
            <div class=" col-md-9 col-xs-9">
                    <div class="shadow p-3 mb-5 bg-white rounded">
            
                            <div class="row">
                                
                                <div class="col-md-12 ">
                                    <div class="card " >
                                        <span id="cimg"><img class="card-img-top" src="https://imgd.aeplcdn.com/370x208/cw/ec/26742/Maruti-Suzuki-New-Swift-Left-Front-Three-Quarter-88877.jpg?v=201711021421&q=80" alt="Card image cap">
                                        </span>
                                        <span id="cbody">
                                         <div class="card-body">
                                          
                
                                          <h5 class="card-title">Swift Desire $12.00 perkm</h5>
                                          <p class="card-text">Suitable for Budget/Family 4 Seater Vehicle</p>
                                         </div>
                                        </span>
                                         
                                          <a href="#" class="btn btn-warning">Book Now</a>
                                        
                                        
                                    </div>                  
                                </div>
                                <div class="col-md-12 ">
                                        <div class="card " >
                                            <span id="cimg"><img class="card-img-top" src="https://imgd.aeplcdn.com/370x208/cw/ec/26742/Maruti-Suzuki-New-Swift-Left-Front-Three-Quarter-88877.jpg?v=201711021421&q=80" alt="Card image cap">
                                            </span>
                                            <span id="cbody">
                                             <div class="card-body">
                                              
                    
                                              <h5 class="card-title">Swift Desire $12.00 perkm</h5>
                                              <p class="card-text">Suitable for Budget/Family 4 Seater Vehicle</p>
                                             </div>
                                            </span>
                                             
                                              <a href="#" class="btn btn-warning">Book Now</a>
                                            
                                            
                                        </div>                  
                                    </div>
                                    <div class="col-md-12 ">
                                            <div class="card " >
                                                <span id="cimg"><img class="card-img-top" src="https://imgd.aeplcdn.com/370x208/cw/ec/26742/Maruti-Suzuki-New-Swift-Left-Front-Three-Quarter-88877.jpg?v=201711021421&q=80" alt="Card image cap">
                                                </span>
                                                <span id="cbody">
                                                 <div class="card-body">
                                                  
                        
                                                  <h5 class="card-title">Swift Desire $12.00 perkm</h5>
                                                  <p class="card-text">Suitable for Budget/Family 4 Seater Vehicle</p>
                                                 </div>
                                                </span>
                                                 
                                                  <a href="#" class="btn btn-warning">Book Now</a>
                                                
                                                
                                            </div>                  
                                        </div>        
                                        <div class="col-md-12 ">
                                                <div class="card " >
                                                    <span id="cimg"><img class="card-img-top" src="https://imgd.aeplcdn.com/370x208/cw/ec/26742/Maruti-Suzuki-New-Swift-Left-Front-Three-Quarter-88877.jpg?v=201711021421&q=80" alt="Card image cap">
                                                    </span>
                                                    <span id="cbody">
                                                     <div class="card-body">
                                                      
                            
                                                      <h5 class="card-title">Swift Desire $12.00 perkm</h5>
                                                      <p class="card-text">Suitable for Budget/Family 4 Seater Vehicle</p>
                                                     </div>
                                                    </span>
                                                     
                                                      <a href="#" class="btn btn-warning">Book Now</a>
                                                    
                                                    
                                                </div>                  
                                            </div>          
                            </div>
                          
                           
                                
                    </div>
   
            </div>
            <div class="col-md-3 col-xs-3">

                <div class="row">
                        <div class="col-md-12">
                                        <div id="custd">

                                                        <p  > Hi I am the right box</p>
                                                
                                                    </div>

                        </div>
                </div>

                    
                
               </div>
       </div>
     
   
     
    
    ```

css file -->

.shadow{
      position:relative;
      top:70;
      width:850px;
      margin-left:20px;
      height:140% !important;
      margin-right:20px !important;
      box-sizing:border-box !important;
      margin-top:20px;
      margin-bottom:100px !important;
      
  }
  .card-img-top{
    width:300px;
    height:175px;
    padding-bottom: 15px;
  }
.card 
{
   display:flex;
   flex-wrap: wrap;
   
   float:left;
   height:175px;
   width:100%;
   padding-bottom:20px !important;
   padding-top: 10px;
   margin-top:15px;

}
.btn-warning
{
    float:left;
    
}
.card-body{
    padding-bottom: 20px;
    margin-left:20px !important;
    
}
#cbody
{
    width:70%;
    margin-top:35px;
    height:130px;
    
}
.card a{
    position: relative;
    left: -170;
    top: 70;
}
.card-text{
    background-color:yellow;
    width:325px;
}
.col-md-12{
    margin-bottom:10px;
}

#custd
{
   margin-top:100px;
    float:left !important;
border:2px solid greenyellow;
height:500px;
width:200px;

}

You are using bootstrap, there is no col-xs-3 or col-xs-9 should be simply col-3 and col-9, that’s the right syntax, and you should use % for the width inorder to make it responsive or else the card will stay the same width if it is set in px

Try these, and also you can provide a codepen by pasting these codes in it, it would be easy to help you out

1 Like

There is if using Bootstrap version 3.0.

Hi Sujith, Thanks for your help… I got what I was wishing for… I removed the grid and kept those left and right contents in a container div and give some width as around 1000px and its showing both contents fixed even when window size is getting decreased.

1 Like