Отзывчивый дизайн не удался

Question

Я испортил отзывчивый дизайн, если вы уменьшите размер браузера, вы увидите, что все графики перепутаны. Есть ли способ исправить графику, чтобы оставаться там, где они должны быть, если размер браузера меньше в css. http://www.magnixsolutions.com/dev/test/test.html

Answer 1

Вы должны использовать медиазапросы They are amazing!

Answer 2

Похоже, вы используете Bootstrap, который имеет инструменты для адаптивного дизайна. Главное, чтобы вы не использовали .row классы и spanx классы столбцов. См. How to use Twitter Bootstrap to Create a Responsive Website Design для более подробной информации.

По умолчанию решетка составляет 12 столбцов. Таким образом, ваши промежутки в строке должны быть равны двенадцати. Ваш HTML должен выглядеть примерно так:

<div class="container"> 
    <div class="row"> 
      <div class="span8 image"> 
      </div> 
      <div class="span4 containerForm"> 
      ...insert form here... 
      </div> 
    </div> 
</div> 

После того как вы разметку набора правильно, перейдите к CSS и начать добавлять @media запросов, как @watson упоминает в своем ответе. Однако, будь осторожен. У Bootsrap множество настроек CSS по умолчанию. Возможно, вам придется переопределить, чтобы получить желаемые результаты.