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


Мобильная Версия


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

#1 Enkha

Enkha

    Пользователь

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

Отправлено 19 Август 2014 - 16:38

Есть несколько вопросов, касающихся мобильной версии сайта.
1) На странице Каталог категории товаров не подписаны, просто картинки, можно это как-то изменить?
IMG_4782.PNG
2) Кнопка покрыта каким-то градиентов, от этого она светлее чем должна быть и выглядит неактивной. Где это можно исправить? Можно кнопку сделать как в основной версии сайта?
IMG_4783.PNG
3) В карточке товара картинка сдвинута слегка вправо, хотелось бы расположить ее по центру экрана. При нажатии увеличить изображение, все отображается как надо.
IMG_4784.jpg
4) Кнопка "Каталог" очень светлая, как поменять ее цвет?
Спасибо.
IMG_4785.PNG

#2 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 19 Август 2014 - 17:21

 Enkha (19 Август 2014 - 16:38) писал:

Есть несколько вопросов, касающихся мобильной версии сайта.
1) На странице Каталог категории товаров не подписаны, просто картинки, можно это как-то изменить?
IMG_4782.PNG
2) Кнопка покрыта каким-то градиентов, от этого она светлее чем должна быть и выглядит неактивной. Где это можно исправить? Можно кнопку сделать как в основной версии сайта?
IMG_4783.PNG
3) В карточке товара картинка сдвинута слегка вправо, хотелось бы расположить ее по центру экрана. При нажатии увеличить изображение, все отображается как надо.
IMG_4784.jpg
4) Кнопка "Каталог" очень светлая, как поменять ее цвет?
Спасибо.
IMG_4785.PNG
Здравствуйте.
1)
в main.css
@media only screen and (max-width: 767px) and (min-width: 480px)
div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {
display: none;
}
измените на
@media only screen and (max-width: 767px) and (min-width: 480px)
div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {
/* display: none; */
}

в main.css
@media only screen and (max-width: 480px)
div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {
display: none;
}
измените на
@media only screen and (max-width: 480px)
div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {
/* display: none; */
}
2) Цвет кнопки у нас такой же, как и на основной версии сайта
3)У нас отображается корректно, в право сдвинуто возможно из-за разрешения устройства которым вы пользуетесь или браузера, попробуйте воспользоваться другим браузером или устройством.
4)
меняется в main.css
#column-left .box .box-heading {
padding: 15px 0;
border-bottom: 1px solid #e1e1e1;
font-size: 20px;
font-weight: normal !important;
margin: 0 10px;
color: #666666;
}
Меняйте значение color: на нужный для Вас цвет

#3 GudBay

GudBay

    Пользователь

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

Отправлено 05 Июнь 2016 - 23:36

 batta (19 Август 2014 - 17:21) писал:

2) Цвет кнопки у нас такой же, как и на основной версии сайта
3)У нас отображается корректно, в право сдвинуто возможно из-за разрешения устройства которым вы пользуетесь или браузера, попробуйте воспользоваться другим браузером или устройством.


Что бы посмотреть как отображается сайт на мобильном устройстве, можно вызвать меню ПКМ и выбрать "Просмотреть код" слева есть иконка "Планшет и смартфон" toggle device mod нажав на нее сразу получите вид на экране мобильного. Вверху можно будет сменить разрешение экрана и его ориентацию. Также можно добавить свое устройство.

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

  • toggle device mod.png


#4 Retina

Retina

    Пользователь

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

Отправлено 21 Июнь 2016 - 14:46

Здравствуйте. По п.1 не получается найти данный код. помогите установить названия.

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

  • 1.png


#5 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 22 Июнь 2016 - 01:24

Сайт - Редактор шаблонов - main.css - 741 строка - найдите и удалите:
div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {display: none;}


#6 Retina

Retina

    Пользователь

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

Отправлено 26 Июнь 2016 - 19:59

Спасибо, текст отображается. Только теперь названия товаров задвоены во всех разделах. Помогите исправить.

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

  • 1.jpg
  • 2.jpg


#7 Danil

Danil

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

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

Отправлено 26 Июнь 2016 - 20:34

 Retina (26 Июнь 2016 - 19:59) писал:

Спасибо, текст отображается. Только теперь названия товаров задвоены во всех разделах. Помогите исправить.
Здравствуйте.
В конец main.css добавьте
@media only screen and (max-width: 480px) {
#content .prod_hold div > .name, #content .prod_hold div > .price {
	display: none;
}
}


#8 SSAASS

SSAASS

    Новичок

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

Отправлено 29 Июль 2016 - 04:18

 Danil (26 Июнь 2016 - 20:34) писал:

Здравствуйте.
В конец main.css добавьте
@media only screen and (max-width: 480px) {
#content .prod_hold div > .name, #content .prod_hold div > .price {
display: none;
}
}

Подобная проблема. Как показала проверка проблема изначально присутствует в шаблоне.
Но prod-info-fly появляется намного раньше достижения этого разрешения (достаточно просто изменять размер окна при просмотре). Соответственно, при горизонтальном разрешении окна менее определенного, считается что это не экран ПК а мобильное устройство без мышки, prod-info-fly становится фиксированным и все так же дублирует данные prod_hold. Промежуточные варианты остаются глючными.
Изменение "max-width: 480px" на большее, приводит к тому что появляется узкий период когда название товара вообще не выводится.
Может стоит ловить момент фиксации prod-info-fly на странице? Происходит одновременно со левого меню каталога товаров при горизонтальном разрешении менее 960рх.
Помогите разобраться.
Заранее спасибо!
SL-382532

#9 Stasya

Stasya

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

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

Отправлено 02 Август 2016 - 15:07

 SSAASS (29 Июль 2016 - 04:18) писал:

Подобная проблема. Как показала проверка проблема изначально присутствует в шаблоне.
Но prod-info-fly появляется намного раньше достижения этого разрешения (достаточно просто изменять размер окна при просмотре). Соответственно, при горизонтальном разрешении окна менее определенного, считается что это не экран ПК а мобильное устройство без мышки, prod-info-fly становится фиксированным и все так же дублирует данные prod_hold. Промежуточные варианты остаются глючными.
Изменение "max-width: 480px" на большее, приводит к тому что появляется узкий период когда название товара вообще не выводится.
Может стоит ловить момент фиксации prod-info-fly на странице? Происходит одновременно со левого меню каталога товаров при горизонтальном разрешении менее 960рх.
Помогите разобраться.
Заранее спасибо!
SL-382532

Если Вы не выполняли данную инструкцию, то Вам необхлодимо в конец файла main.css добавить следующий блок, если выполняли, то замените данный блок на
@media only screen and (max-width: 768px) {#content .prod_hold div > .name, #content .prod_hold div > .price {display: none;}}


#10 SSAASS

SSAASS

    Новичок

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

Отправлено 03 Август 2016 - 20:08

 Stasya (02 Август 2016 - 15:07) писал:

Если Вы не выполняли данную инструкцию, то Вам необхлодимо в конец файла main.css добавить следующий блок, если выполняли, то замените данный блок на
 @media only screen and (max-width: 768px) {#content .prod_hold div > .name, #content .prod_hold div > .price {display: none;}} 

Не думаю что это решение вопроса, писал выше, но проделал.
При этом пропадают названия категорий, что является минусом.

#11 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 04 Август 2016 - 01:52

В main.css найдите и удалите:
#content .prod_hold div > .name, #content .prod_hold div > .price {
	display: none;
}


#12 SSAASS

SSAASS

    Новичок

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

Отправлено 04 Август 2016 - 18:14

 Vaccina (04 Август 2016 - 01:52) писал:

В main.css найдите и удалите:
 #content .prod_hold div > .name, #content .prod_hold div > .price { display: none; } 

Сделано. В чем смысл? Естественно все вернулось на исходную. Делается сугубо только ради Вас, что бы Вы могли отследить.

#13 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 05 Август 2016 - 01:34

Выше вы писали:

Цитата

При этом пропадают названия категорий, что является минусом.

Моя инструкция была направлена на отображение названий категорий в блоках при небольших разрешениях.

#14 Retina

Retina

    Пользователь

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

Отправлено 02 Октябрь 2016 - 09:36

Добрый день. По непонятным причинам у меня не отображаются категории на мобильных устройствах, хотя все операции проделаны, лишние строки удалены и добавлены нужные. Названия появляются только при разрешении 768+ . Помогите пожалуйста. Спасибо.

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

  • Форум.png


#15 Danil

Danil

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

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

Отправлено 02 Октябрь 2016 - 09:46

 Retina (02 Октябрь 2016 - 09:36) писал:

Добрый день. По непонятным причинам у меня не отображаются категории на мобильных устройствах, хотя все операции проделаны, лишние строки удалены и добавлены нужные. Названия появляются только при разрешении 768+ . Помогите пожалуйста. Спасибо.
Здравствуйте.
В main.css найдите код
@media only screen and (max-width: 480px) {
#content .prod_hold div > .name, #content .prod_hold div > .price {
		display: none;}}
и замените на
@media only screen and (max-width: 480px) {
#content .product-list .prod_hold div > .name, #content .prod_hold div > .price {display: none;}
}


#16 Retina

Retina

    Пользователь

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

Отправлено 02 Октябрь 2016 - 10:20

 Danil (02 Октябрь 2016 - 09:46) писал:

Здравствуйте.
В main.css найдите код
@media only screen and (max-width: 480px) {
#content .prod_hold div > .name, #content .prod_hold div > .price {
	 display: none;}}
и замените на
@media only screen and (max-width: 480px) {
#content .product-list .prod_hold div > .name, #content .prod_hold div > .price {display: none;}
}


Названия задвоились теперь в разных разделах.

-И помогите еще надпись убрать "Добавить в корзину" в разделе "С этим товаром смотрят".

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

  • Форум.png
  • Форум.png


#17 Danil

Danil

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

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

Отправлено 02 Октябрь 2016 - 10:34

 Retina (02 Октябрь 2016 - 10:20) писал:

Названия задвоились теперь в разных разделах.

-И помогите еще надпись убрать "Добавить в корзину" в разделе "С этим товаром смотрят".
Код
@media only screen and (max-width: 480px) {
#content .product-list .prod_hold div > .name, #content .prod_hold div > .price {display: none;}
}
и замените на
@media only screen and (max-width: 480px) {
#content .prod_hold div > .name, #content .prod_hold div > .price {display: none;}
#content .product-list2 .prod_hold div > .name {display: block;}
}





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

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