Sign in to follow this  
Followers 0
pawok

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

7 posts in this topic

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

 

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

 

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

 

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 (возможно, это необязательный параметр).

pawok likes this

Share this post


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

 

@media only screen and (min-width: 450px) {
  div.left, div.right{
    display: block;
    width: 100%;
  }
}
pawok likes this

Share this post


Link to post
Share on other sites

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

pawok likes this

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.