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.
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 thewidth
inorder to make it responsive or else the card will stay the samewidth
if it is set inpx
Try these, and also you can provide a codepen by pasting these codes in it, it would be easy to help you out
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.