Отзывчивый контейнер/макет

Question

Я пытаюсь сделать отзывчивый макет для изображений и текста вместе. Изображения реагируют, однако текст разбивается на более мелкие устройства. Пожалуйста помоги!

 
<h3><strong> </strong></h3> 
 
<div style="width: 60%; padding: 0 10 pt 0 0; float: left;"> 
 
<h3><strong>Contact a Manager to Learn More!</strong></h3> 
 

 

 
<h3>Arizona Offices:</h3> 
 
<p><img style="float: left;" class="img-responsive" src="/media/3559/lettyhuffman.png?width=158&amp;height=216" alt="letty.huffman.png" rel="6743" /></p> 
 
    
 
<p> </p> 
 
</div> 
 
<div style="width: 40%; padding: 0 10pt 0 0; float: right;"> 
 
<p><br /><br /><br /><br /><img style="float: left;" src="/media/3564/gerifarr.png?width=158&amp;height=216" alt="Geri.Farr.png" rel="6748" /></p> 
 
<h4> Phoenix:</h4> 
 
<h5><strong> Geri </strong></h5> 
 
<p><span style="line-height: 1.42857143;"> Regional Manager</span></p> 
 

 
<p style="padding-left: 150px;"><span style="line-height: 1.42857143;"> Fax: 602.224.4842 </span></p> 
 
<p> </p> 
 
</div> 
 
<div style="width: 60%; padding: 0 10 pt 0 0; float: left;"> 
 
<p><img style="float: left;" src="/media/3549/no_photo_female.png?width=158&amp;; height=216" alt="JPM" rel="" /></p> 
 
<h4> Maricopa County:</h4> 
 
<h5><strong> Jessica Paquette- Maxwell</strong></h5> 
 
<p> Maricopa County Talent Acquisition Manager</p> 
 
    
 
</div> 
 
<div style="width: 40%; padding: 0 10pt 0 0; float: right;"> 
 
<p><img style="float: left;" src="/media/3562/dianahillman.png?width=158&amp;height=216" alt="Diana.Hillman.png" rel="6746" /></p> 
 
<h4> Tucson &amp; Yuma:</h4> 
 
<h5><strong> Diana </strong></h5> 
 
<p><span style="line-height: 1.42857143;"> Vice President &amp; Branch Manager</span></p> 
 
    
 

Answer 1

Я просто ответил на очень похожий вопрос от кого-то еще, это то, что я писал:

Вы можете посмотреть в CSS функцию под названием @media правило, например: @media only screen and (max-width: 800px) { font-size:20px; }

Таким образом вы можете добавить свойства css в таблицу стилей, которые влияют только после того, как браузер достигнет определенной минимальной ширины. Это, на мой взгляд, лучший способ сделать любой сайт отзывчивым. Нет необходимости в javascript, и вам не нужно создавать совершенно новый веб-сайт на субдомене, как это делают многие веб-сайты.

Только FYI, все, что находится внутри медиа-правила, будет добавлено или перезапишет текущую таблицу стилей, поэтому вам не нужно дублировать каждую запись, которую вы имеете до сих пор, только те, которые вы хотите добавить/изменить ,

Относительно размера шрифта. Обычно я использую 16-20px на экранах шириной менее 800 пикселей, что в основном относится к смартфонам.