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


Мобильная Версия Сдвинута Кнопка Купить

мобильная версия купить сдвинута

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

#1 like.hornet.6

like.hornet.6

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 21 Декабрь 2016 - 03:27

Заметил явный косяк в отображении в мобильной версии.

Когда смотришь товары в категории, то под изображением товара  идёт цена и ниже неё кнопка купить - всё это помещается в зелёном блоке. Это занимает лишнее место, которого и так мало в мобильниках. Справа от указания цены есть место для кнопки, куда и следовало бы поместить её.

При изменении экрана на горизонтальное положение отображение немного меняется и выглядит куда более ровно (кнопка и цена находятся справа от фото, но при вертикальном выглядит всё не очень ровно.

Стрелочкой показал куда следует поместить кнопку.
Помогите сделать это.

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

  • wp_ss_20161221_0001.png


#2 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 29 Декабрь 2016 - 15:21

Просмотр сообщенияlike.hornet.6 (21 Декабрь 2016 - 03:27) писал:

Заметил явный косяк в отображении в мобильной версии.

Когда смотришь товары в категории, то под изображением товара  идёт цена и ниже неё кнопка купить - всё это помещается в зелёном блоке. Это занимает лишнее место, которого и так мало в мобильниках. Справа от указания цены есть место для кнопки, куда и следовало бы поместить её.

При изменении экрана на горизонтальное положение отображение немного меняется и выглядит куда более ровно (кнопка и цена находятся справа от фото, но при вертикальном выглядит всё не очень ровно.

Стрелочкой показал куда следует поместить кнопку.
Помогите сделать это.

Здравствуйте. В файле main.css найдите блок
.price ul.cost {
	font-size: 94%;
  }
}
@media screen and (max-width: 320px) {

и замените его на
.price ul.cost {
	font-size: 94%;
	float: left;
  }
.maingoodstable .goodsListForm{float:right}
}
@media screen and (max-width: 320px) {


#3 like.hornet.6

like.hornet.6

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 01 Январь 2017 - 19:22

Просмотр сообщенияStasya (29 Декабрь 2016 - 15:21) писал:

Здравствуйте. В файле main.css найдите блок
.price ul.cost {
font-size: 94%;
}
}
@media screen and (max-width: 320px) {

и замените его на
.price ul.cost {
font-size: 94%;
float: left;
}
.maingoodstable .goodsListForm{float:right}
}
@media screen and (max-width: 320px) {

На главной странице всё изменилось, а вот в каталоге отображается как и раньше.

#4 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 09 Январь 2017 - 13:48

Просмотр сообщенияlike.hornet.6 (01 Январь 2017 - 19:22) писал:

На главной странице всё изменилось, а вот в каталоге отображается как и раньше.
В файле main.css найдите блок
.maingoodstable .goodsListForm{float:right}
}
@media screen and (max-width: 320px) {
и замените его на
.goodsListForm{float:right}
}
@media screen and (max-width: 320px) {


#5 like.hornet.6

like.hornet.6

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 12 Январь 2017 - 14:01

Просмотр сообщенияStasya (09 Январь 2017 - 13:48) писал:

В файле main.css найдите блок
.maingoodstable .goodsListForm{float:right}
}
@media screen and (max-width: 320px) {
и замените его на
.goodsListForm{float:right}
}
@media screen and (max-width: 320px) {

Теперь поменялось и в категориях - выглядит куда более приятно.

Но, есть одна корявость: кнопка КУПИТЬ теперь слишком вправо уходит - некорректно настроен отступ, видимо.
Нужно чтобы отступ от края зелёного блока был, а на скрине выглядит всё так, будто отступ идёт от правого края страницы.

Как сделать отступ в несколько пикселей от правого края зелёного блока?

Спасибо.

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

  • wp_ss_20170112_0001.png


#6 Firefly

Firefly

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

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

Отправлено 13 Январь 2017 - 13:52

Просмотр сообщенияlike.hornet.6 (12 Январь 2017 - 14:01) писал:

Теперь поменялось и в категориях - выглядит куда более приятно.

Но, есть одна корявость: кнопка КУПИТЬ теперь слишком вправо уходит - некорректно настроен отступ, видимо.
Нужно чтобы отступ от края зелёного блока был, а на скрине выглядит всё так, будто отступ идёт от правого края страницы.

Как сделать отступ в несколько пикселей от правого края зелёного блока?

Спасибо.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
  .price.over form>div a {
	float: left;
	margin: 2% 0% 0% 4%;
	text-align: center;
	width: 58px;
  }

Замените на:
  .price.over form>div a {
	margin: 2% 4% 0% 4%;
	text-align: center;
	width: 58px;
  }


#7 like.hornet.6

like.hornet.6

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 14 Январь 2017 - 00:28

Просмотр сообщенияFirefly (13 Январь 2017 - 13:52) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.price.over form>div a {
float: left;
margin: 2% 0% 0% 4%;
text-align: center;
width: 58px;
}

Замените на:
.price.over form>div a {
margin: 2% 4% 0% 4%;
text-align: center;
width: 58px;
}

Теперь всё просто замечательно!
Большое спасибо!





Темы с аналогичным тегами мобильная версия, купить, сдвинута

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

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