CSS варьируется div между двумя значениями ширины

Question

Я пытаюсь создать стиль div так, чтобы его ширина уменьшалась после определенной точки по ширине окна просмотра.

Вот мой код:

<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/> 
     <a href="#book" class="book-now">BOOK NOW</a> 
    </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%; 
    } 
} 

Я хочу, чтобы ширина .info-block DIV уменьшить до тех пор, ширина окна просмотра не упрется 961px. В настоящее время .info-block сжимается до 977px, а затем падает на следующую строку.

Как предотвратить .info-block от перехода на следующую строку? Нет JS/JQuery, пожалуйста.

Answer 1

Вы хотите использовать min-width и max-width свойства? обычно как абсолюты, а затем устанавливают стандартную ширину в процентах. Также установите ширину в запросе медиафайла на !important, чтобы заменить установленную компоновку.

@media screen and (min-width: 961px) and (max-width: 1050px) 
{ 
    .info-block 
    { 
min-width:200px; 
    width: 30% !important; 
max-width:400px; 
    } 
}