CSS vary div between two width values - html

Question

I am trying style a div so that its width decreases after a certain point wrt to the width of the viewport.
Here is my code:
<div data-category="budget" class="hotels-block active ">
<img src="images/budget1.jpg">
<div class="info-block">
<h2>BUDGET HOTEL 1</h2>
<p>fist line, second line, USA, third line comes over here</p>
<hr/>
BOOK NOW
</div>
</div>
CSS :
.hotels-block {
overflow: hidden;
margin-bottom: 30px;
}
.hotels-block img {
float:left;
}
.info-block {
width: 320px;
float: left;
display: inline-block;
background-color: #62bcb1;
text-align: center;
color: #FFF;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
#media screen and (min-width: 961px) and (max-width: 1050px)
{
.info-block
{
width: 30%;
}
}
I want the width of the .info-block div to reduce until the viewport width hits 961px.
Currently, .info-block shrinks until 977px and then falls to the next line.
How do I prevent .info-block from going to the next line? No JS/JQuery please.

Answer 1

you want to use min-width and max-width properties? usually as absolutes and then set the standard width to a percentage. Also set the width in the media query to !important to supersede the pre-set arrangement.
#media screen and (min-width: 961px) and (max-width: 1050px)
{
.info-block
{
min-width:200px;
width: 30% !important;
max-width:400px;
}
}