Сообщений в теме: 4

[Ast]

Аккаунт SL-368333

Рисую страницу сайта, которая должна иметь 4 блока для текстов. Использую тэги div для колонок. В десктопной версии все получается хорошо, но в мобильной версии либо колонки не влезают по ширине, либо наезжают друг на друга. Как сверстать колонки чтобы они в декстопной версии выводились по горизонтали, а в мобильной выстраивались в вертикаль друг за другом как на скриншоте.

Прикрепленные изображения

• 
• 

[Firefly]

Ast (20 Апрель 2016 - 12:59) писал:

Аккаунт SL-368333

Рисую страницу сайта, которая должна иметь 4 блока для текстов. Использую тэги div для колонок. В десктопной версии все получается хорошо, но в мобильной версии либо колонки не влезают по ширине, либо наезжают друг на друга. Как сверстать колонки чтобы они в декстопной версии выводились по горизонтали, а в мобильной выстраивались в вертикаль друг за другом как на скриншоте.

Здравствуйте.
Внес Вам изменения для главной страницы сайта в разделе Сайт -> Страницы. Для прописанных классов указал параметры в шаблоне main.css. В мобильной версии блоки будут разворачиваться на всю ширину 100%, при разрешении экрана > 768px блоки будут в виде плитки по 2 на строку (как и было раньше).

/* Баннеры на главной */
.ibanners {width:100%; float:left;}
.ibanner1 {width:100%; float:left;}
.ibanner2 {width:100%; float:right;}
@media all and (min-width: 768px) {
.ibanner1 {width:50%; float:left;}
.ibanner2 {width:50%; float:right;}
}

Для новой страницы укажите аналогичную конструкцию вида:

<div class="banner">
<div class="banner_in">содержимое</div>
<div class="banner_in">содержимое</div>
<div class="banner_in">содержимое</div>
<div class="banner_in">содержимое</div>
</div>

И добавьте в шаблон main.css код:

.banner {width:100%; float:left;}
.banner_in {width:100%; float:left;}
@media all and (min-width: 768px) {
.banner_in {width:33.333%; float:left;}
}

[Ast]

На главной стало отлично, спасибо. Но на новой странице в мобильной версии все ок, выстраивается по вертикали, а в десктопной версии колонки также идут по вертикали (скрин прилагаю). В стили код добавил.
Если изменить процент ширины для banner_in , в десктопной версии выстраиваются 4 колонки, тогда в мобильной версии тоже показываются узкие колонки.

Прикрепленные изображения

• 

[Firefly]

Ast (20 Апрель 2016 - 14:07) писал:

На главной стало отлично, спасибо. Но на новой странице в мобильной версии все ок, выстраивается по вертикали, а в десктопной версии колонки также идут по вертикали (скрин прилагаю). В стили код добавил.
Если изменить процент ширины для banner_in , в десктопной версии выстраиваются 4 колонки, тогда в мобильной версии тоже показываются узкие колонки. http://okna-vdome.ru.../okna-rehau-new

В main.css найдите вставленный ранее код:

.banner {width:100%; float:left;}
.banner_in {width:100%; float:left;}
@media all and (min-width: 768px) {
.banner_in {width:33.333%; float:left;}
}

Замените на:

.banner {width:100%; float:left;}
.banner_in {width:100%;float:left;padding: 2%;}
@media all and (min-width: 768px) {
.banner_in {width: 25%;float:left;}
}

[Ast]

Все получилось, спасибо!