Перейти к содержимому


Контент В Мобильной Версии

Автор Ast, 21 мая 2016 09:49

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 4

#1 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 21 Май 2016 - 09:49

Аккаунт SL-381850

Здравствуйте.
Помогите пожалуйста решить 2 банальные проблемы:
1. В мобильной версии часть контента главной страницы залезает под шапку. А именно скрывается часть текста h1
2. На главной расположил 5 иконок товара по горизонту, используя конструкцию


<div class="ibanners">
<div class="ibanner1"><img alt="" src="адрес" style="float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="адрес" style="float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="адрес" style="float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="адрес" style="float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="адрес" style="float: left; height: 120px;" /></div>
</div>

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

Иконки в десктопной версии выстраиваются по горизонту только если устанавливаю значение width:20% в стилях для мобильной версии. Значение width для стиля десктопной версии никак не влияет. В мобильной версии при этом также иконки показываются в горизонтальной прокрутке, хотя должны выстраиваться по вертикали. Помогите пожалуйста разобраться в чем дело. Спасибо

#2 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 21 Май 2016 - 11:02

Просмотр сообщенияAst (21 Май 2016 - 09:49) писал:

Аккаунт SL-381850

Здравствуйте.
Помогите пожалуйста решить 2 банальные проблемы:
1. В мобильной версии часть контента главной страницы залезает под шапку. А именно скрывается часть текста h1
2. На главной расположил 5 иконок товара по горизонту, используя конструкцию


<div class="ibanners">
<div class="ibanner1"><img alt="" src="адрес" style="float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="адрес" style="float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="адрес" style="float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="адрес" style="float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="адрес" style="float: left; height: 120px;" /></div>
</div>

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

Иконки в десктопной версии выстраиваются по горизонту только если устанавливаю значение width:20% в стилях для мобильной версии. Значение width для стиля десктопной версии никак не влияет. В мобильной версии при этом также иконки показываются в горизонтальной прокрутке, хотя должны выстраиваться по вертикали. Помогите пожалуйста разобраться в чем дело. Спасибо

Здравствуйте.
1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .hidden-tablet {display: none !important;}
  .container {width: 460px;}
  .container .column,  .container .columns {margin-left: 5px;margin-right: 5px;}
  .columns.alpha {margin-left: 0;margin-right: 5px;}
  .columns.omega {margin-right: 0;margin-left: 5px;}
  .alpha.omega {margin-left: 0;margin-right: 0;}
  .container .two.columns {width: 200px;}
  .container .four.columns {width: 100%;}
  .container .five.columns, .container .twelve.columns {width: 460px;margin:0;}
 
  .fluid-container  {position: relative;height:50px;}

Замените на:
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .hidden-tablet {display: none !important;}
  .container {width: 460px;}
  .container .column,  .container .columns {margin-left: 5px;margin-right: 5px;}
  .columns.alpha {margin-left: 0;margin-right: 5px;}
  .columns.omega {margin-right: 0;margin-left: 5px;}
  .alpha.omega {margin-left: 0;margin-right: 0;}
  .container .two.columns {width: 200px;}
  .container .four.columns {width: 100%;}
  .container .five.columns, .container .twelve.columns {width: 460px;margin:0;}
 
  .fluid-container  {position: relative;height:220px;}

2. Найдите код:
/* Баннеры на главной */
.ibanners {width:100%; float:left;}
.ibanner1 {width:20%; float:left;}
@media all and (min-width: 768px) {
.ibanner1 {width:20%; float:left;}

Замените на:
/* Баннеры на главной */
.ibanners {width:100%; float:left;}
.ibanner1 {width: 100%;float:left;text-align: center;}
@media all and (min-width: 768px) {
.ibanner1 {width:20%; float:left;}

Зайдите в редактирование главной страницы (Сайт -> Страницы (Источник)), найдите код:
<div class="ibanners">
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/7/1885/058/ind1.jpg" style="margin: 0px; float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/9/1885/059/ind2.jpg" style="margin: 0px; float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/8/1885/060/ind3.jpg" style="margin: 0px; float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/9/1885/061/ind4.jpg" style="margin: 0px; float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/6/1885/062/ind5.jpg" style="margin: 0px; float: left; height: 120px;" /></div>
</div>

Замените на:
<div class="ibanners">
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/7/1885/058/ind1.jpg" style="height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/9/1885/059/ind2.jpg" style="height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/8/1885/060/ind3.jpg" style="height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/9/1885/061/ind4.jpg" style="height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/6/1885/062/ind5.jpg" style="height: 120px;" /></div>
</div>

#3 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 21 Май 2016 - 12:06

Просмотр сообщенияFirefly (21 Май 2016 - 11:02) писал:

Здравствуйте.
1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
@media only screen and (min-width: 480px) and (max-width: 767px) {
.hidden-tablet {display: none !important;}
.container {width: 460px;}
.container .column, .container .columns {margin-left: 5px;margin-right: 5px;}
.columns.alpha {margin-left: 0;margin-right: 5px;}
.columns.omega {margin-right: 0;margin-left: 5px;}
.alpha.omega {margin-left: 0;margin-right: 0;}
.container .two.columns {width: 200px;}
.container .four.columns {width: 100%;}
.container .five.columns, .container .twelve.columns {width: 460px;margin:0;}

.fluid-container {position: relative;height:50px;}

Замените на:
@media only screen and (min-width: 480px) and (max-width: 767px) {
.hidden-tablet {display: none !important;}
.container {width: 460px;}
.container .column, .container .columns {margin-left: 5px;margin-right: 5px;}
.columns.alpha {margin-left: 0;margin-right: 5px;}
.columns.omega {margin-right: 0;margin-left: 5px;}
.alpha.omega {margin-left: 0;margin-right: 0;}
.container .two.columns {width: 200px;}
.container .four.columns {width: 100%;}
.container .five.columns, .container .twelve.columns {width: 460px;margin:0;}

.fluid-container {position: relative;height:220px;}

2. Найдите код:
/* Баннеры на главной */
.ibanners {width:100%; float:left;}
.ibanner1 {width:20%; float:left;}
@media all and (min-width: 768px) {
.ibanner1 {width:20%; float:left;}

Замените на:
/* Баннеры на главной */
.ibanners {width:100%; float:left;}
.ibanner1 {width: 100%;float:left;text-align: center;}
@media all and (min-width: 768px) {
.ibanner1 {width:20%; float:left;}

Зайдите в редактирование главной страницы (Сайт -> Страницы (Источник)), найдите код:
<div class="ibanners">
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/7/1885/058/ind1.jpg" style="margin: 0px; float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/9/1885/059/ind2.jpg" style="margin: 0px; float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/8/1885/060/ind3.jpg" style="margin: 0px; float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/9/1885/061/ind4.jpg" style="margin: 0px; float: left; height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/6/1885/062/ind5.jpg" style="margin: 0px; float: left; height: 120px;" /></div>
</div>

Замените на:
<div class="ibanners">
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/7/1885/058/ind1.jpg" style="height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/9/1885/059/ind2.jpg" style="height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/8/1885/060/ind3.jpg" style="height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/9/1885/061/ind4.jpg" style="height: 120px;" /></div>
<div class="ibanner1"><img alt="" src="http://st.kyxtex.ru/6/1885/062/ind5.jpg" style="height: 120px;" /></div>
</div>

Первая проблема не изменилась. Часть текста h1 остается под шапкой в мобильной версии
И сейчас появился еще вопрос. На главной странице баннер в мобильной версии не влезает по ширине Как можно решить такую проблему? Если нет, то как убрать показ банера в мобильной версии, оставив его в дескпотной?
Вторая часть проблемы решена, спасибо.

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

  • indexxxx.jpg

#4 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 21 Май 2016 - 12:16

Просмотр сообщенияAst (21 Май 2016 - 12:06) писал:

Первая проблема не изменилась. Часть текста h1 остается под шапкой в мобильной версии
И сейчас появился еще вопрос. На главной странице баннер в мобильной версии не влезает по ширине Как можно решить такую проблему? Если нет, то как убрать показ банера в мобильной версии, оставив его в дескпотной?
Вторая часть проблемы решена, спасибо.

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
@media only screen and (max-width: 479px) {
.hidden-phone {display: none !important;}
.container { width: 300px; }
.container .columns,
.container .column { margin: 0; }
.container .two.columns,
.container .four.columns,
.container .five.columns,
.container .twelve.columns { width: 300px; }

.fluid-container {position: relative;height:160px;}

Замените на:
@media only screen and (max-width: 479px) {
.hidden-phone {display: none !important;}
.container { width: 300px; }
.container .columns,
.container .column { margin: 0; }
.container .two.columns,
.container .four.columns,
.container .five.columns,
.container .twelve.columns { width: 300px; }

.fluid-container {position: relative;height: 220px;}

Зайдите в редактирование главной страницы, найдите код:
<a href="http://kyxtex.ru/page/action"><img alt="" src="http://st.kyxtex.ru/6/1885/086/banner.jpg" />​</a>

Замените на:
<a href="http://kyxtex.ru/page/action"><img alt="" src="http://st.kyxtex.ru/6/1885/086/banner.jpg" style="width:100%;"/>​</a>

#5 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 21 Май 2016 - 13:13

Просмотр сообщенияFirefly (21 Май 2016 - 12:16) писал:

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
@media only screen and (max-width: 479px) {
.hidden-phone {display: none !important;}
.container { width: 300px; }
.container .columns,
.container .column { margin: 0; }
.container .two.columns,
.container .four.columns,
.container .five.columns,
.container .twelve.columns { width: 300px; }

.fluid-container {position: relative;height:160px;}

Замените на:
@media only screen and (max-width: 479px) {
.hidden-phone {display: none !important;}
.container { width: 300px; }
.container .columns,
.container .column { margin: 0; }
.container .two.columns,
.container .four.columns,
.container .five.columns,
.container .twelve.columns { width: 300px; }

.fluid-container {position: relative;height: 220px;}

Зайдите в редактирование главной страницы, найдите код:
<a href="http://kyxtex.ru/page/action"><img alt="" src="http://st.kyxtex.ru/6/1885/086/banner.jpg" />​</a>

Замените на:
<a href="http://kyxtex.ru/page/action"><img alt="" src="http://st.kyxtex.ru/6/1885/086/banner.jpg" style="width:100%;"/>​</a>

Всё получилось, спасибо!
Обратно в Другое


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Движение
  5. → Другое
  6. Privacy Policy