Andrew S.

@media screen and (max-width: 580px) {

.header-inner {
margin-bottom: 5px;
}
.bottom-inner-content .logoblock-center, .bottom-inner-content .logoblock-right {
display: none;
}
.bottom-inner-content .logoblock-left {
height: auto;
padding: 0;
}
#image-1 {
position: relative;
right: initial;
bottom: initial;
height: 20px;
overflow: visible;
}
.searchForm {
width: 90%;
}
.cart {
width: 10%;
overflow: hidden;
}
.cartBtn > * {
float: none;
margin: 0 auto;
width: 30px;
background-repeat: no-repeat;
background-position: center center;
}

Andrew S. (13 Апрель 2016 - 08:15) писал:

@media screen and (max-width: 580px) {...}

.cart {
	 float: right;
	 position: relative;
	 width: 20px;
	 overflow: hidden;
	 min-width: 20px;
	 padding: 5px 1px 0 1px;
}

.cart {
	 float: right;
	 position: relative;
	 width: 55px;
	 overflow: hidden;
	 min-width: 20px;
	 padding: 5px 1px 0 1px;
}

#image-1 {
	 position: relative;
	 right: initial;
	 bottom: initial;
	 height: 20px;
	 overflow: visible;
}

#image-1 {
position: relative;
right: 0 !important;
bottom: 0 !important;
height: 20px;
overflow: visible;
}

a.countTovars {
display: inline-block;
}

a.countTovars {
display: none;
}

Цитата

Разрешение ниже 370px:

Тут те же самые отступы, что и выше описано.

@media screen and (max-width: 370px) {

a.countTovars {
display: none !important;
}
#image-1 {
right: 0px !important;
bottom: 0px !important;
width: 92%;
}
.searchBtn.btn {
left: 85%;
}
.searchForm {
width: 75%;
}
.cart {
width: 46px;
}
.header-inner {
	 margin-bottom: 13px;
}

Цитата

1. Разрешение ниже 320px по горизонтали:

а) чтобы строка поиска помещалась с корзиной, может ширину автоматической задать или наоборот ширину 90% сделать чтоб корзинка влезла.
б) чтобы корзина не прилипала вплотную к правой части, была примерно по-середине между поиском и краем правой части.
в) нужен отступ сверху для логотипа.
г) не нужен слишком большой отступ ниже логотипа
д) нужно как-то обнулить отступ справа у контактов, а то он встаёт в середину, плюс ему старый отступ добавляется от большого разрешения.

.cartNameBtn1 {
	 display: none;
	 display: inline-block;
	 padding-top: 3px;
	 float: left;
}

.cartNameBtn1 {
	 display: none;
	 padding-top: 3px;
	 float: left;
}

a.countTovars {
display: none !important;
}
#image-1 {
right: 0px !important;
bottom: 0px !important;
width: 92%;
}
.searchBtn.btn {
left: 85%;
}
.searchForm {
width: 75%;
}
.cart {
width: 46px;
}
.header-inner {
	margin-bottom: 13px;
}

@media screen and (max-width: 320px) {

@font-face {
				 font-family: 'Roboto-Thin';
				 src: url('http://design.te...oimp.ru/Roboto-Thin.ttf') format('truetype');
				 font-weight: normal;
				 font-style: normal;
}

@font-face {
				 font-family: 'Roboto-Thin';
				 src: local("Roboto-Thin"),
				   url('http://design.te...oimp.ru/Roboto-Thin.ttf') format('truetype');
				 font-weight: normal;
				 font-style: normal;
}

http://design.te...oimp.ru/Roboto-Thin.ttf

http://site.ru/Roboto-Thin.ttf

http://design.te...oimp.ru/

http://sait.ru/design/

/design/

.cart {
	float: right;
	width: auto;
	padding-right: 0.6em;
}

.cart {
	float: none;
	width: auto;
	padding-right: 0.6em;
	display: inline-block;
}
.searchForm {
	float: none !important;
	display: inline-block !important;
	margin-bottom: 15px;
}
nav.head, nav.footer-menu {
	position: relative;
	width: 100%;
	text-align: center;
}
ul.head li {
	float: none !important;
}

.bottom-inner-content > div {
	width: 50%;
	padding: 1% 0;
}

.bottom-inner-content > div {
	width: 50%;
	padding: 1% 0;
	float: none;
	margin: 0 auto;
	display: block;
	text-align: center;
	position: relative !important;
}
.logoblock-center, .logoblock-right {
	display: none;
}

.cart {
	min-width: 92px;
	padding: 0;
}

.searchForm {
	float: none !important;
	display: inline-block;
	margin-bottom: 5px;
}

.cart {
	float: right;
	position: static;
}

.cart {
	float: right;
	position: relative;
	width: 20px;
	overflow: hidden;
	min-width: 20px;
	padding: 5px 1px 0 1px;
}

.cartNameBtn1 {
	display: inline-block;
	padding-top: 3px;
	float: left;
}

.cartNameBtn1 {
	display: none;
}

.dop_info_in_cat {
	white-space: inherit;
	word-wrap: normal;
	width: 100%;
	clear: both;
}

.dop_info_in_cat a {
	color: #ccc;
}

#noty_center_layout_container li {
	border: 1px solid #000 !important;
}

Andrew S. (05 Апрель 2016 - 09:25) писал:

Всё, что было ДО в этой теме, вроде всё сделано, кроме:

Сначала очистить кэш, чтобы не было просмотренных товаров. Потом перейти в раздел: Главная » Каталог » Автозапчасти » Двигатель » Ремни

Смотрите:

А. В третьем режиме всё отображается пропорционально. Фото как бы по центру первой "ячейки", если представить это таблицей (но не создавать таблицу) :
rezhim3.png

Б. Но во втором режиме что-то когда-то испортили и фото уже не по центру:
rezhim2.png
Может посмотреть как в третьем режиме и поставить по аналогии? Я просто не пойму где нужные классы находятся.

Не нужно ставить фиксированные отступы. Нужно во втором режиме отображения товаров - позицию по ширине для фото задать автоматически по центру.

И, пожалуйста, чтобы не испортить ничего остального...

.goods-list .goodsListImgBlcok {background: #fff;display: block;height: 245px;text-align: center;width: 245px;overflow:hidden;position: relative;}

.goods-list .goodsListImgBlcok {background: #fff;display: block;height: 245px;text-align: center;width: 245px;overflow:hidden;position: relative;margin: 0 auto;}

Andrew S. (05 Апрель 2016 - 15:08) писал:

margin: 0 auto;

Andrew S. (04 Апрель 2016 - 16:14) писал:

Andrew S. (04 Апрель 2016 - 04:48) писал:

Добрый день.

Помогите, пожалуйста, подправить:

1. Во втором, третьем режиме отображения каталога, в товаре в количестве, в выборе диапазона цены, при нажатии в поле где цифра, рамки становятся темнее если мышкой нажать, чтобы число ввести, а тут - нет:
Border1.jpg
Помогите сделать также в этом первом табличном режиме, который на рисунке...

Это пример:
Border2.png

2. Помогите убрать треугольники внизу:
Triangle1.png

3. Второй режим отображения товаров единственный нормальный в адаптивном, помогите исправить недочёт, не испортив этого:
List1.jpg
Нужно чтобы внизу было как слева и как вверху. Каким-то минимумом, или отступами для фото или ещё как-то.
Чтобы это не повлияло ни на адаптивный, ни на первый, ни на третий режимы отображения товаров в каталоге.

4. А также в нижнем меню сделать чтобы при наведении был другой цвет:
HOVER.png
Чтобы он регулировался отдельно от цвета выделения в верхнем меню!

5. Ещё внизу много лишнего пространства:
DOWN2.jpg
Там что-то какой-то конфликт или не понять что, плюс лишней области.

6. Изменить цвет границы во всплывающих сообщениях:
BORDER3.jpg
Не пойму где он находится.

7. Некорректное отображение фото во втором режиме крупным списком:
Photo2rezhim1.jpg
Если маленькое фото, оно уходит, не по центру. И его надо растянуть по размеру как у всех, как в первом режиме табличном:
Photo2rezhim2.jpg

8. Некорректный размер фото в первом режиме таблицы (это видно на последнем рисунке выше):
249*246. Нужно чтобы фото было квадратное с одинаковой длиной по x и y.

9. Почему-то мутно отображается меню:
BLURRY.png
Не всегда, в половине случаев. Смотря на какое место проскроллен экран.

ДАЛЕЕ ПУНКТЫ КАСАЕМО ТОЛЬКО РАЗМЕЩЕНИЯ ТОВАРОВ В ТРЁХ ТИПАХ КАТАЛОГА:
НЕОБХОДИМО ХОРОШО ОЧИСТИТЬ КЭШ, чтобы было всё видно
10. Фото в первом режиме, всё время разные ширина и высота. Как я понимаю, должно быть всегда 245.
PHOTO11.jpg

11. Слишком большой отступ между фото и текстом справа. Сделать меньше, но чтобы оно всё не испортило в других местах!
PHOTO12.png

Потом адаптивный чинить.

.newCont:after,.newCont:before {
	bottom: 100%;
	right: 6.7%;
	width: 0;
	height: 0;
	content: ' ';
	pointer-events: none;
	border: solid transparent;
	position: absolute;
}

.newCont:after,.newCont:before {
  display:none;
	bottom: 100%;
	right: 6.7%;
	width: 0;
	height: 0;
	content: ' ';
	pointer-events: none;
	border: solid transparent;
	position: absolute;
}

ul.head li:hover a, nav.footer-menu li:hover a {background-color:#999;}

ul.head li:hover a {background-color:#999;}
nav.footer-menu li:hover a {background-color:#fff;}

.footer-inner-content {
	display: inline-block;
	width: 100%;
	min-height: 100px;
	margin-bottom: -1em;
	padding-bottom: 1em;
	/* border-top: 0px solid #e1e1e1; */
	border-bottom: 1px solid #707070;
	/* background-color: #0c84ac; */
}

.footer-inner-content {
	display: inline-block;
	width: 100%;
	min-height: 100px;
	margin-bottom: -1em;
	/* border-top: 0px solid #e1e1e1; */
	border-bottom: 1px solid #707070;
	/* background-color: #0c84ac; */
}

.numeric.big-numeric input[type='number']:focus {border-color: #8c8c8c;}

.goods-list .goodsListImgBlcok > a img {
  display: block;
  margin: 0 auto;
  max-height: 245px;
  max-width: 245px;
  width: auto;
}

.goods-list .goodsListImgBlcok > a img {
  display: block;
  margin: 0 auto;
  max-height: 245px;
  max-width: 245px;
  width: auto;
	  padding-bottom: 8px;
}

Andrew S. (02 Апрель 2016 - 14:35) писал:

MIDDLE2.png

Нужно чтобы во втором режиме отображения товаров надпись осталась где была (слева).

PRICE22.png

В недавно добавленных тоже сместилась цена. Надо чтобы было как было!

.prices ul.cost {
text-align: center;
}

.goods-list.table_mini .prices ul.cost {
text-align: center;
}