Оцените небольшую адаптивную вёрстку

Общее
1

http://allnet.16mb.com/zzz/

Какие замечания можете дать?

2

На этом разрешении все ломается http://take.ms/kn6va . Вам надо как то определиться с подходом, вы либо делаете фиксированную ширину и фиксированные маргины, и на определенных точках их просто меняете, либо вы делаете процентные маргины и процентную ширину, и на определенных разрешениях меняете процент.

А вообще лучше бы вам разделить сетку и сами объекты. Постройте простую сетку из 4 колонок.

<div class="container clearfix">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Задайте им всех фиксированную ширину по 25%, и чтобы удобнее было работать с сеткой внутренние отступы, равные отступу между вашими элементами. Боксовую модель и флоуты.

.column{
  width: 25%;
  padding: 0 20px;
  box-sizing: border-box;
  float: left;
}

Теперь остается только положить каждый ваш блок с ценой внутрь каждой колнки. При этом самим блока размер не нужен вообще, они будут тянутся на 100 процентов колонки. В медиа выражениях вам теперь достаточно менять ширину колонок например на 50% или 100% чтобы у вас сетка менялась на 2 колонки в строке или 1 колонка в строке.

Элемент списка

3

Спасибо за совет, я переделал, перепроверьте пожалуйста.

А почему вы выбрали флоты, а не инлайн-блоки?

4

Я привык строить сетку на флоутах)

Вот так недопустимо делать, у вас div не семантических элемент, получается на странице 4 хедера. Заменить его на div. Ну и в целом результат уже лучше)

1 лайк