Ширина блока <div>

Сайт: http://vlad77mk.s09.wh1.su/

Нужны совет и помощь

Создал блоки "оплата", "доставка", номера телефонов, информационные и т.д. Как сделать так, что-бы они были примерно в том положении и размерах что и сейчас, но в мобильной версии вставали на 100% ширины экрана телефона? Если сделать width: 100%; но в таком случае блоки встают по одному в ряд. Как лучше поступить?

И совет)
Как бы Вы расположили эти блоки для удобства? Я думаю, что в таком их количестве получается сильно наляписто, не так ли?

 

Приветствую!
Ваш вариант не адаптивный, т.к. Вы используете инлайновые стили, то бишь пишите их прям таки в вёрстке.
Для адаптивности пользуйтесь классами бутстрапа. Пропишите блокам, которые 4 в ряд - class="col-sm-3 col-xs-12". И поместите их все внутрь блока <div class="row">
В общем вот так....

Код:

<div class="row">
  <div class="col-sm-3 col-xs-12">...</div>
  <div class="col-sm-3 col-xs-12">...</div>
  <div class="col-sm-3 col-xs-12">...</div>
  <div class="col-sm-3 col-xs-12">...</div>
</div>

 

Сделал так как сказали - теперь появились другие неудобства. Изначально блоки были вплотную друг к другу. Я прописал margin-left: 15px; но теперь они выстроились в два ряда.

То есть, нужно сделать ширину блоков чуть меньше, что-бы они поместились. Но если прописать фиксированную ширину width: 250px; то и в мобильной версии они будут 250 пикселей в ширину...

Ах да, в мобильной версии эти четыре блока растянуты от края до края. И если margin-left: 15px; прокатило, то right отступа не даёт...

 

Код:

<div class="row row-5">
  <div class="col-sm-3 col-xs-12 col-padding-5">
    <div class="header-info-block">
    здесь содержимое блока
    </div>
  </div>
  <div class="col-sm-3 col-xs-12 col-padding-5">
    <div class="header-info-block">
    здесь содержимое блока
    </div>
  </div>
  <div class="col-sm-3 col-xs-12 col-padding-5">
    <div class="header-info-block">
    здесь содержимое блока
    </div>
  </div>
  <div class="col-sm-3 col-xs-12 col-padding-5">
    <div class="header-info-block">
    здесь содержимое блока
    </div>
  </div>
</div>

В файле stylesheets.css разместите...

Код:

.row-5 {
   margin-left: -5px;
   margin-right: -5px;
}
.col-padding-5 {
   padding-left: 5px;
   padding-right: 5px;
}
.header-info-block {
   background: #ffffff;
   padding: 10px;
   border-radius: 8px;
   margin-bottom: 20px;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Удалите стили из верстки и обновите кэш браузера!

 

Большое спасибо) Буду знать теперь.