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


Навести Порядок После Изменений:)

Автор Антон1212, 27 авг. 2014 00:15

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

#41 Viking

Viking

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

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

Отправлено 13 Сентябрь 2014 - 20:18

Просмотр сообщенияDanil (13 Сентябрь 2014 - 19:25) писал:

Если Вы имели в виду отступ справа в каталоге товаров, то попробуйте такой вариант
В main.css найдите код
.product-list, .product-list2, .product-list3, .product-list4 {
padding: 10px;
margin-bottom: 15px;
background-color: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border-bottom: 4px solid #e1e1e1;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #e1e1e1\0/;
float: left;
width: 100%;
box-sizing: border-box;
}
Замените на
.product-list, .product-list2, .product-list3, .product-list4 {
padding: 10px;
margin-bottom: 15px;
background-color: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border-bottom: 4px solid #e1e1e1;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #e1e1e1\0/;
float: left;
margin-right:10px;
box-sizing: border-box;
}

Замена width: 100%; на margin-right:10px; не нравится, т.к. сам блок остается шире в мобильной версии при отображении таблицей!, а вот при отбражении списком в мобильной версии Ок.

2. Там же в мобильной версии блок с фильтрами тоже вылазит за тело сайта как при отображении таблицей, так и  при отображении списком.

Мне кажется это взаимосвязанные проблемы.

#42 Viking

Viking

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

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

Отправлено 13 Сентябрь 2014 - 20:32

Просмотр сообщенияDanil (13 Сентябрь 2014 - 20:13) писал:

В main.css найдите код
#footer .inner_top {
background: #ffffff !important;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
border-bottom: 4px solid #e1e1e1;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
position: relative;
overflow: auto;
padding-top: 15px;
}
И замените на
#footer .inner_top {
background: #ffffff !important;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
border-bottom: 4px solid #e1e1e1;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
position: relative;
overflow: auto;
padding-top: 15px;
display: none;
}

нее... display: none; не пойдет... так как Новости/Статьи уже не отобразятся там.

#43 Danil

Danil

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

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

Отправлено 13 Сентябрь 2014 - 20:35

Просмотр сообщенияViking (13 Сентябрь 2014 - 20:18) писал:

Замена width: 100%; на margin-right:10px; не нравится, т.к. сам блок остается шире в мобильной версии при отображении таблицей!, а вот при отбражении списком в мобильной версии Ок.

2. Там же в мобильной версии блок с фильтрами тоже вылазит за тело сайта как при отображении таблицей, так и  при отображении списком.

Мне кажется это взаимосвязанные проблемы.

Изменения не отменяйте, потому что мы не сможем Вам помочь.
Для начала в main.css найдите код
.product-filter {
padding: 15px 10px 15px 10px;
background-color: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border-bottom: 4px solid #e1e1e1;
margin-bottom: 15px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #e1e1e1\0/;
float: left;
width: 97%;
}
И замените на
.product-filter {
padding: 15px 10px 15px 10px;
background-color: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border-bottom: 4px solid #e1e1e1;
margin-bottom: 15px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #e1e1e1\0/;
float: left;
width: 96%;
}
Там же найдите код
.product-list, .product-list2, .product-list3, .product-list4 {
padding: 10px;
margin-bottom: 15px;
background-color: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border-bottom: 4px solid #e1e1e1;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #e1e1e1\0/;
float: left;
width: 100%;
box-sizing: border-box;
}
И замените на
.product-list, .product-list2, .product-list3, .product-list4 {
padding: 10px;
margin-bottom: 15px;
background-color: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border-bottom: 4px solid #e1e1e1;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #e1e1e1\0/;
float: left;
width: 98%;
box-sizing: border-box;
}

#44 Viking

Viking

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

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

Отправлено 15 Сентябрь 2014 - 16:26

Добрый день.

Записал в настройках валюты модный знак рубля!  Но он не отображается на смартфоне :(

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

  • 15091402.png

#45 AnnaM

AnnaM

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

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

Отправлено 15 Сентябрь 2014 - 16:51

Просмотр сообщенияViking (15 Сентябрь 2014 - 16:26) писал:

Добрый день.

Записал в настройках валюты модный знак рубля!  Но он не отображается на смартфоне :(
К сожалению,данный символ не на всех платформах и не во всех браузерах отображается корректно из-за своей кодировки.

#46 Viking

Viking

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

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

Отправлено 17 Сентябрь 2014 - 12:13

Добрый день.

Перенес "Сравнить" в свое место. Теперь нужно подправить отображение в мобильной версии. Именно "сравнить", т.к. до этого корзина и поиск отображались нормально.
Скорее всего проблема где-то в майне (начало со строки 140). Возможно из за тега display:block; который не понимаю как работает.

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

  • 17091401.png

#47 Viking

Viking

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

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

Отправлено 17 Сентябрь 2014 - 12:39

1. На странице товара с Характеристиками, для закрывающего "бордера" нужен отступ.
2. Как-то сократить адаптивность отступов между Названием характеристики и ее значением.

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

  • 17091402.png

#48 batta

batta

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

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

Отправлено 17 Сентябрь 2014 - 12:51

Просмотр сообщенияViking (17 Сентябрь 2014 - 12:13) писал:

Добрый день.

Перенес "Сравнить" в свое место. Теперь нужно подправить отображение в мобильной версии. Именно "сравнить", т.к. до этого корзина и поиск отображались нормально.
Скорее всего проблема где-то в майне (начало со строки 140). Возможно из за тега display:block; который не понимаю как работает.
Здравствуйте.
в main.css
@media only screen and (max-width: 767px) and (min-width: 480px)
#compareInfo {
margin: 10px auto -20px;
width: 100%;
text-align: center;
}
измените на
@media only screen and (max-width: 767px) and (min-width: 480px)
#compareInfo {
margin: -34px auto -20px;
width: 100%;
text-align: center;
left: -241px;
}

в main.css
#compareInfo a {
display: inline-block;
text-decoration: none;
margin-top: 3px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 0px;
font-size: 14px;
cursor: pointer;
}
измените на
#compareInfo a {
display: inline-block;
text-decoration: none;
margin-top: 3px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 224px;
font-size: 14px;
cursor: pointer;
}

#49 Viking

Viking

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

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

Отправлено 17 Сентябрь 2014 - 13:21

Просмотр сообщенияbatta (17 Сентябрь 2014 - 12:51) писал:

Здравствуйте.
в main.css
@media only screen and (max-width: 767px) and (min-width: 480px)
#compareInfo {
margin: 10px auto -20px;
width: 100%;
text-align: center;
}
измените на
@media only screen and (max-width: 767px) and (min-width: 480px)
#compareInfo {
margin: -34px auto -20px;
width: 100%;
text-align: center;
left: -241px;
}


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

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

  • 17091403.png

#50 Vaccina

Vaccina

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

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

Отправлено 18 Сентябрь 2014 - 03:39

В main,css найдите:
#compareInfo a {
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	margin: 6px 2px 2px 224px;
	text-decoration: none;
}
замените на:
#compareInfo a {
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	margin: 6px 2px 2px 0;
	text-decoration: none;
	white-space: nowrap;
}

далее найдите:
#compareInfo {
	clear: both;
	display: block;
	float: right;
	font-size: 11px;
	height: 30px;
	margin: -45px 550px 10px 0;
	position: relative;
}
замените на:
#compareInfo {
	clear: both;
	display: block;
	float: right;
	font-size: 11px;
	height: 30px;
	margin: 0;
	position: relative;
}
#compareInfoBlock{float:right;margin: 13px 40px 0 0;}

Далее в HTML найдите:
<div id="compareInfoBlock" class="inner">
замените на:
<div id="compareInfoBlock" >

Обратно в Страница товара


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

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

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