Слайд-шоу плохо работает на мобильных устройствах

Привет! На прошлой неделе я создал домашнюю страницу для своей семьи (www.celador.se

). Поскольку я впервые работал с CSS, я использовал шаблоны для большинства более сложных вещей, включая баннер.

Сейчас в Chrome и Safari все работает нормально, но на моем планшете и телефоне слайд-шоу в верхней части страницы в 3 или 4 раза длиннее остальной части страницы.

Я пробовал использовать модификаторы, такие как

«Только экран Скрытая информация :: Авторизуйтесь для просмотра »
и (макс.

ширина: 480 пикселей) {.slides, .slide width: 300 пикселей;}» (отредактируйте: разместите мобильные стили внизу этой страницы, если это поможет). но вообще ничего не происходит.

Может кто-нибудь мне помочь?

код:

.слайды {

заполнение: 0;

ширина: 1170 пикселей;

высота: 330 пикселей;

дисплей: блок;

маржа: 0 авто;

положение: относительное;

}

.слайды * {

выбор пользователя: нет;

-ms-user-select: нет;

-moz-user-select: нет;

-khtml-user-select: нет;

-webkit-user-select: нет;

-webkit-touch-callout: нет;

}

.slides input { display: none; }

.slide-container {дисплей: блок;}

.горка {

верх: 0;

непрозрачность: 0;

ширина: 1170 пикселей;

высота: 330 пикселей;

дисплей: блок;

позиция: абсолютная;

преобразование: масштаб (0);

переход: все .7 с легким выходом;

}

.slide изображение {

ширина: 100%;

высота: 100%;

}

.slideshownav метка {

ширина: 200 пикселей;

высота: 100%;

дисплей: нет;

позиция: абсолютная;

непрозрачность: 0;

z-индекс: 9;

курсор: указатель;

переход: непрозрачность .2с;

цвет: #FFF;

размер шрифта: 156pt;

выравнивание текста: по центру;

высота строки: 380 пикселей;

семейство шрифтов: «Varela Round», без засечек;

цвет фона: rgba(255, 255, 255, .3);

текстовая тень: 0 пикселей 0 пикселей 15 пикселей RGB (119, 119, 119);

}

.slide:hover + .slideshownav label { непрозрачность: 0,5; }

.slideshownav label:hover { непрозрачность: 1; }

.slideshownav .next { вправо: 0; }

ввод: проверено + .slide-container .slide {

непрозрачность: 1;

преобразование: масштаб (1);

переход: непрозрачность 1 с, легкость выхода;

}

ввод: проверено + .slide-container .slideshownav label { display: block; }

.slideshownav-dots {

ширина: 100%;

внизу: 9 пикселей;

высота: 11 пикселей;

дисплей: блок;

позиция: абсолютная;

выравнивание текста: по центру;

}

.slideshownav-dots .slideshownav-dot {

верх: -5 пикселей;

ширина: 11 пикселей;

высота: 11 пикселей;

поле: 0 4 пикселя;

положение: относительное;

граница-радиус: 100%;

отображение: встроенный блок;

цвет фона: rgba(177, 0, 0, 33);

}

.slideshownav-dots .slideshownav-dot:hover {

курсор: указатель;

цвет фона: rgba(117, 34, 0, 1);

}

input#img-1:проверено ~ .slideshownav-dots label#img-dot-1,

input#img-2:проверено ~ .slideshownav-dots label#img-dot-2,

input#img-3:проверено ~ .slideshownav-dots label#img-dot-3,

input#img-4:проверено ~ .slideshownav-dots label#img-dot-4,

input#img-5:проверено ~ .slideshownav-dots label#img-dot-5,

input#img-6:checked ~ .slideshownav-dots label#img-dot-6 {

фон: #F867B3

}

#список ссылок {

ширина: 200 пикселей;

поле: 30 пикселей;

}

h2.linklist {

шрифт: 400 40px/1,5 Helvetica, Verdana, без засечек;

маржа: 0;

заполнение: 0;

начертание шрифта: жирный;

межбуквенный интервал: -2px

}

ул.список ссылок {

тип стиля списка: нет;

маржа: 0;

заполнение: 0;

}

li.linklist {

шрифт: 200 20px/1,5 Helvetica, Verdana, без засечек;

нижняя граница: 1 пиксель сплошной #ccc;

}

li.linklist:последний ребенок {

граница: нет;

}

li.linklist а {

текстовое оформление: нет;

цвет: #b10021;

-webkit-transition: размер шрифта 0,3 секунды, цвет фона 0,3 секунды;

-moz-transition: размер шрифта 0,3 секунды, фоновый цвет 0,3 секунды;

-o-transition: размер шрифта 0,3 секунды, фоновый цвет 0,3 секунды;

-ms-transition: размер шрифта 0,3 секунды, фоновый цвет 0,3 секунды;

переход: размер шрифта 0,3 с, легкость фона 0,3 с;

дисплей: блок;

ширина: 200 пикселей;

}

li.linklist a:hover {

размер шрифта: 30 пикселей;

фон: #f6f6f6;

}

МОБИЛЬНЫЕ СТИЛИ — ниже приведено то, что уже было в шаблоне таблицы стилей, который я использовал, как я уже сказал, я пытался просто добавить что-то, что выглядело… ну… похоже, но безрезультатно.

/* мобильные стили */

Скрытая информация :: Авторизуйтесь для просмотра »
только экран и (максимальная ширина: 480 пикселей) {

h2 { поле-дно: 5 пикселей; }

.navbar-form {margin-top: 0px; ширина: 100%; }

.templatemo-nav { позиция: фиксированная; верх: 25 пикселей; справа: 3 пикселя; z-индекс: 1000; }

.nav-justified > li > a { padding-left: 40px; отступ справа: 40 пикселей; }

#thumbnails_container {margin-left: 10px; поле справа: 10 пикселей; отступ слева: 5 пикселей; отступ справа: 5 пикселей; }

#thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 {padding-left: 5px; отступ справа: 5 пикселей; }

.section_box {высота: авто; ширина: 100%; максимальная ширина: нет; минимальная высота: 1 пиксель; }

#templatemo_footer {margin-bottom: 5px; }

.slide {ширина: 480; высота: 200;}

.slides {ширина: 480; height:200;} /* ПРОСТО ТЕСТИРОВАНИЕ БЕЗ .PX*/

}

/* стили планшета */

Только экран Скрытая информация :: Авторизуйтесь для просмотра »
и (минимальная ширина: 481 пикселей) и (максимальная ширина: 767 пикселей) {

h2 { поле-дно: 5 пикселей; }

.navbar-form {margin-top: 0px; ширина: 100%; }

.templatemo-nav { позиция: фиксированная; верх: 25 пикселей; справа: 3 пикселя; z-индекс: 1000; }

.nav-justified > li > a { padding-left: 40px; отступ справа: 40 пикселей; }

#thumbnails_container {margin-left: 20px; поле справа: 20 пикселей; отступ слева: 5 пикселей; отступ справа: 5 пикселей; }

#thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 {padding-left: 10px; отступ справа: 10 пикселей; }

#download_box {плавать: влево; отступ сверху: 10 пикселей; маржа: 0 авто; }

.preview_footer_container {margin-top: 10px; }

.footer_item { поле справа: 10 пикселей; }

.footer_item:last-child {margin-right: 0px; }

.section_box {высота: авто; ширина: 100%; максимальная ширина: нет; минимальная высота: 1 пиксель; }

#templatemo_footer {margin-bottom: 5px; }

.slide {ширина: 480; высота: 200;}

.slides {ширина: 480; height:200;} /* ПРОСТО ТЕСТИРОВАНИЕ БЕЗ .PX*/

}

/* стили рабочего стола */

Только экран Скрытая информация :: Авторизуйтесь для просмотра »
и (минимальная ширина: 768 пикселей) и (максимальная ширина: 991 пикселей) {

.navbar-header h2{ поле: 0 пикселей; поле сверху: 34 пикселя; }

#thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 {padding-left: 10px; отступ справа: 10 пикселей; }

.preview_footer_container {margin-top: 30px; }

.footer_item { поле справа: 15 пикселей; }

.footer_item:last-child {margin-right: 0px; }

.section_box {высота: 330 пикселей; максимальная ширина: 230 пикселей; }

}

Только экран Скрытая информация :: Авторизуйтесь для просмотра »
и (минимальная ширина: 992 пикселей) и (максимальная ширина: 1199 пикселей) {

.header{ поле слева: 30 пикселей; }

.navbar-header h2{ поле: 0 пикселей; поле сверху: 34 пикселя; }

#thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 {padding-left: 10px; отступ справа: 10 пикселей; }

.preview_footer_container {margin-top: 30px; }

}

Скрытая информация :: Авторизуйтесь для просмотра »
только экран и (минимальная ширина: 1200 пикселей) {

#thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 {padding-left: 10px; отступ справа: 10 пикселей; }

.preview_footer_container {margin-top: 66px; }

}