pawok 669 Posted August 3, 2016 Report Share Posted August 3, 2016 На сайте установлен адаптивный дизайн, Добавил пару новых блоков в основное содержание и отображение стало некрасивым на адаптивной версии для мобильных. Как сделать, чтобы два блока располагались последовательно при уменьшении экрана, а не продолжали стоять рядом? ____ Проблема решена, решение ниже. Link to post Share on other sites
valentino 60 Posted August 3, 2016 Report Share Posted August 3, 2016 изменить ширину, она осталась 50% и они стали рядом.... Link to post Share on other sites
VIP campusboy 912 Posted August 3, 2016 VIP Report Share Posted August 3, 2016 @media (max-width: 450px) { div.left, div.right{ display: block; width: 100%; } } При ширине экрана 450px и ниже ширина блоков станет 100% и примет свойство display: block (возможно, это необязательный параметр). pawok 1 Link to post Share on other sites
valentino 60 Posted August 3, 2016 Report Share Posted August 3, 2016 @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 1 Link to post Share on other sites
VIP campusboy 912 Posted August 3, 2016 VIP Report Share Posted August 3, 2016 @valentino, с какой целью уточнили? Если в запросе не описан типа устройства, то правило будет применяться ко всем типам устройств. Зачем включать эти правила только для экранов компьютеров, планшетов, смартфонов? Пусть применяется ко всем устройствам да и кода писать меньше, во всяком случае ситуация это позволяет. pawok 1 Link to post Share on other sites
Administrators DevilStar 1179 Posted August 4, 2016 Administrators Report Share Posted August 4, 2016 Написанный на скорую руку вариант с флексбоксами (становится в столбик на разрешении менее 800px) http://codepen.io/Simushkin/pen/PzywvQ BlackMaN333 1 Link to post Share on other sites
pawok 669 Posted August 4, 2016 Author Report Share Posted August 4, 2016 @media (max-width: 450px) { div.left, div.right{ display: block; width: 100%; } } При ширине экрана 450px и ниже ширина блоков станет 100% и примет свойство display: block (возможно, это необязательный параметр). Благодарю. Этого оказалось достаточно! Link to post Share on other sites
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now