pawok 669 Posted August 3, 2016 Report Share Posted August 3, 2016 На сайте установлен адаптивный дизайн, Добавил пару новых блоков в основное содержание и отображение стало некрасивым на адаптивной версии для мобильных. Как сделать, чтобы два блока располагались последовательно при уменьшении экрана, а не продолжали стоять рядом? ____ Проблема решена, решение ниже. Quote Link to post Share on other sites
valentino 60 Posted August 3, 2016 Report Share Posted August 3, 2016 изменить ширину, она осталась 50% и они стали рядом.... Quote 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 Quote 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 Quote Link to post Share on other sites
VIP campusboy 912 Posted August 3, 2016 VIP Report Share Posted August 3, 2016 @valentino, с какой целью уточнили? Если в запросе не описан типа устройства, то правило будет применяться ко всем типам устройств. Зачем включать эти правила только для экранов компьютеров, планшетов, смартфонов? Пусть применяется ко всем устройствам да и кода писать меньше, во всяком случае ситуация это позволяет. pawok 1 Quote Link to post Share on other sites
Administrators DevilStar 1168 Posted August 4, 2016 Administrators Report Share Posted August 4, 2016 Написанный на скорую руку вариант с флексбоксами (становится в столбик на разрешении менее 800px) http://codepen.io/Simushkin/pen/PzywvQ BlackMaN333 1 Quote 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 (возможно, это необязательный параметр). Благодарю. Этого оказалось достаточно! Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.