Сообщений в теме: 7

[bahtin106]

Здравствуйте. Работаю над сайтом на большом мониторе 27" с разрешением 1920х1080. Зашел на сайт с ноутбука (1366х768) и увидел, что информация на слайдере не адаптируется под разрешение экрана, а, соответственно, не помещается полностью на экране. Можно ли сделать так, чтобы на всех разрешениях информация отображалась корректно? В остальном, на ноутбуке, сайт работает нормально.

(на фото разница между отображениями сайта с большого монитора и с ноутбука)

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

• 
• 

[bahtin106]

В дополнении к предыдущему сообщению:
Как сделать кнопки в стилистике сайта, по примеру скриншота? Кнопку "Смотреть каталог" сделать побольше, а две других поменьше?

p.s. Заметил, что при уменьшении размера страницы в Chrome, уменьшается все содержимое, кроме картинки слайдера и ширины полупрозрачного фона на нем

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

• 
• 

[Razon]

bahtin106 (18 Октябрь 2016 - 02:13) писал:

В дополнении к предыдущему сообщению:
Как сделать кнопки в стилистике сайта, по примеру скриншота? Кнопку "Смотреть каталог" сделать побольше, а две других поменьше?

p.s. Заметил, что при уменьшении размера страницы в Chrome, уменьшается все содержимое, кроме картинки слайдера и ширины полупрозрачного фона на нем

Здравствуйте, для картинки слайдера:
В вашем бэк-офисе, раздел Сайт-Редактор шаблонов, в конце файла main.css  вставьте строку:

#slideshow {max-height:900px;}

Для надписи на слайдере уточните пожалуйста, при масштабирование возможно просто убрать пустое пространство фона надписи, но сам блок останется смещен влево,  или выровнять его посередине при масштабировании ?

Кнопки:
В файле HTML найдите:

<!-- Slider Слайдер -->
{% IF index_page %}
<div id="slideshow">

Замените на:

<!-- Slider Слайдер -->
{% IF index_page %}
<div id="slideshow">
	 <a href="#"><div class="slidebutton1 slb">Скидки</div></a>
	 <a href="#"><div class="slidebutton2 slb">Смотреть каталог</div></a>
	 <a href="#"><div class="slidebutton3 slb">Доставка</div></a>

Где # замените на необходимые вам ссылки.

Далее в конце файла main.css добавьте строки:

.slb {position:absolute; color:#000; z-index:999; border:2px solid #fff;padding:20px;top:20%;font-size:20px;text-align:center;min-width:215px;}
.slb:hover {color:#fff;border:2px solid #fff;
-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;-ms-transition: all 0.3s ease;transition: all 0.3s ease;}

.slidebutton1 {top:30%;margin-left:20%;width:20%;}
.slidebutton2 {margin-left:40%;width:20%;}
.slidebutton3 {top:30%;margin-left:60%;width:20%;}

@media all and (max-width: 768px) {
  .slb {display:none;}
}

[bahtin106]

Цитата

Для надписи на слайдере уточните пожалуйста, при масштабирование возможно просто убрать пустое пространство фона надписи, но сам блок останется смещен влево,  или выровнять его посередине при масштабировании ?

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

Проблема в кнопках, опять же, если просматривать с маленького разрешения. На большом мониторе все отображается корректно.

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

• 

[Vaccina]

В main.css найдите:

.slb {
	position: absolute;
	color: #000;
	z-index: 999;
	border: 2px solid #fff;
	padding: 20px;
	top: 20%;
	font-size: 20px;
	text-align: center;
	min-width: 215px;
}

замените на:

.slb {
	position: absolute;
	color: #000;
	z-index: 999;
	border: 2px solid #fff;
	padding: 20px;
	top: 25%;
	font-size: 20px;
	text-align: center;
	min-width: 215px;
}

далее найдите:

.slidebutton1 {
	top: 30%;
	margin-left: 20%;
	width: 20%;
}

замените на:

.slidebutton1 {
	top: 35.6%;
	margin-left: 20%;
	width: 20%;
}

далее найдите:

.slidebutton3 {
	top: 30%;
	margin-left: 60%;
	width: 20%;
}

замените на:

.slidebutton3 {
	top: 35.6%;
	margin-left: 60%;
	width: 20%;
}

[bahtin106]

Все сделал, но все равно, на разрешениях более низких отображалось фигово. Решил сделать кнопки в ряд, теперь все хорошо. Вопрос теперь в другом. При наведении на корзину кнопка "Доставка" все равно выходит на первый план. Приложил скриншот

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

• 

[Razon]

bahtin106 (19 Октябрь 2016 - 23:34) писал:

Все сделал, но все равно, на разрешениях более низких отображалось фигово. Решил сделать кнопки в ряд, теперь все хорошо. Вопрос теперь в другом. При наведении на корзину кнопка "Доставка" все равно выходит на первый план. Приложил скриншот

Здравствуйте,  в файле main.css  найдите:

.slb {
		position: absolute;
		color: #000;
		z-index: 999;
		border: 3px solid #FFF;
		padding: 20px;
		top: 25%;
		font-size: 30px;
		text-align: center;
		min-width: 215px;
}

Замените на:

.slb {
		position: absolute;
		color: #000;
		z-index: 9;
		border: 3px solid #FFF;
		padding: 20px;
		top: 25%;
		font-size: 30px;
		text-align: center;
		min-width: 215px;
}

[bahtin106]

Спасибо, все работает)