Страница "ездит" после установки HYPER Positions

[premisse]

Проблема такая:

потребовалось добавить отдельную позицию для слайдера на главной, стандартно он выводился не на всю ширину экрана, а рядом с боковым меню (шаблон Simplica, opencart 2.3.0.2). Для этого установила модификатор HYPER Positions, появилось две дополнительные позиции над и под основным контентом.

Все бы ничего, но теперь главная страница "ездит" влево-вправо, а в мобильном варианте вообще какой-то кошмар, а не слайдер ) - так понимаю верстка поехала и видимо надо копаться в css этого модификатора. 

Подскажите, пожалуйста, где найти корень бед и как поправить  

вот сайт: http://ambermaster.ru

[kJlukOo]

Только что, premisse сказал:

Проблема такая:

потребовалось добавить отдельную позицию для слайдера на главной, стандартно он выводился не на всю ширину экрана, а рядом с боковым меню (шаблон Simplica, opencart 2.3.0.2). Для этого установила модификатор HYPER Positions, появилось две дополнительные позиции над и под основным контентом.

Все бы ничего, но теперь главная страница "ездит" влево-вправо, а в мобильном варианте вообще какой-то кошмар, а не слайдер ) - так понимаю верстка поехала и видимо надо копаться в css этого модификатора. 

Подскажите, пожалуйста, где найти корень бед и как поправить  

вот сайт: http://ambermaster.ru

a к аваро обращались?

[premisse]

15 minutes ago, kJlukOo said:

a к аваро обращались?

пока нет, надеялась разобраться ..

 

[Gorman]

Слайдер не очень адаптивный, лучше конечно доработать его более полноценно. Нужно копаться в css, все верно говорите.

 

Чтобы страницу так не пучило, можете сразу поправить отступы.

У элемента ниже есть класс owl-carousel

<div id="slideshow0" class="owl-carousel owl-theme" style="opacity: 1; display: block;">

У данного класса есть свойство margin: 0 100px 20px; . Его нужно удалить, страницу перестанет тянуть влево вправо. Появится другая неприятность, на большом экране слайдер не будет стоять посередине, но тут уже надо дальше работать.

 

Как найти свойство в css файле знаете?

Змінено 17 лютого 2018 користувачем Gorman

[premisse]

17 minutes ago, Gorman said:

Слайдер не очень адаптивный, лучше конечно доработать его более полноценно. Нужно копаться в css, все верно говорите.

 

Чтобы страницу так не пучило, можете сразу поправить отступы.

У элемента ниже есть класс owl-carousel

<div id="slideshow0" class="owl-carousel owl-theme" style="opacity: 1; display: block;">

У данного класса есть свойство margin: 0 100px 20px; . Его нужно удалить, страницу перестанет тянуть влево вправо. Появится другая неприятность, на большом экране слайдер не будет стоять посередине, но тут уже надо дальше работать.

 

Как найти свойство в css файле знаете?

удалила (вроде то, что надо, прикрепила скрин) , но, кажется не помогло

[Gorman]

Сделайте принудительное обновление страницы  - на виндовс ctrl+f5, сайт пока отдает Вам старую версию стилей, обновите - отдаст новую. Я уже вижу изменения

Змінено 17 лютого 2018 користувачем Gorman

[premisse]

Вернула на место и заменила цифры на "0" и страница перестала ездить ) Спасибо,  Gorman!

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

[Gorman]

Заменить цифры на 0 или стереть - одно и то же в нашем случае просто сайт отдал новый css и все отрисовалось.

Если знаете как работать с отладкой в браузере (F12) и хотите покопаться, то дам Вам вектор - все абсолютные размеры (в px) нужно заменить на относительные (в %). Конечно, тех стилей, которые касаются этого баннера. Плюс для мобилки придется писать медиа-запрос (тоже можете погуглить, если время есть), ибо баннер сократить пропорционально можно, а вот растянуть как видно нельзя - поэтому в определенный момент он и не центрируется. 

В общем, можно экспериментировать в отладке)

[HyperLabTeam]

10 минут назад, premisse сказал:

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

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

[premisse]

Похоже вопрос решен, добавила "margin: 0 auto;" в ".thumbnail>img{display:block;max-width:100%;height:auto;}" и слайдер перестал прятаться в углу

Еще раз спасибо Gorman!