Jump to content
Sign in to follow this  
pawok

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

Recommended Posts

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

 

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

 

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

 

2b515dca9e45bf9f34d7abbf10233a1b.png

____

 

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

Share this post


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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


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

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

 

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...