Content of the page overrides on one another

Content of the page overrides on one another
0

#1

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.


#2

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


#3

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>
     
   
     
    
    ```

#4

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;

}


#5

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


#6

There is if using Bootstrap version 3.0.


#7

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.