Jump to content

Последовательное расположение DIV - адаптивный дизайн


Recommended Posts

На сайте установлен адаптивный дизайн,

 

Добавил пару новых блоков в основное содержание и отображение стало некрасивым на адаптивной версии для мобильных.

 

Как сделать, чтобы два блока располагались последовательно при уменьшении экрана, а не продолжали стоять рядом?

 

2b515dca9e45bf9f34d7abbf10233a1b.png

____

 

Проблема решена, решение ниже.

Link to post
Share on other sites
  • VIP
@media (max-width: 450px) {
  div.left, div.right{
    display: block;
    width: 100%;
  }
}

При ширине экрана 450px и ниже ширина блоков станет 100% и примет свойство display: block (возможно, это необязательный параметр).

Link to post
Share on other sites
  • VIP

@valentino, с какой целью уточнили? Если в запросе не описан типа устройства, то правило будет применяться ко всем типам устройств. Зачем включать эти правила только для экранов компьютеров, планшетов, смартфонов? Пусть применяется ко всем устройствам  :)  да и кода писать меньше, во всяком случае ситуация это позволяет.

Link to post
Share on other sites
  • Administrators

Написанный на скорую руку вариант с флексбоксами (становится в столбик на разрешении менее 800px)

 

http://codepen.io/Simushkin/pen/PzywvQ

Link to post
Share on other sites
@media (max-width: 450px) {
  div.left, div.right{
    display: block;
    width: 100%;
  }
}

При ширине экрана 450px и ниже ширина блоков станет 100% и примет свойство display: block (возможно, это необязательный параметр).

 

 

Благодарю. Этого оказалось достаточно!

Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...