Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

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

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

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

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

Link to post
Share on other sites

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

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

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

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

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

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

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

  • +1 1
Link to post
Share on other sites
15 minutes ago, kJlukOo said:

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

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

 

Link to post
Share on other sites

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

 

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

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

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

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

 

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

Edited by Gorman
Link to post
Share on other sites
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 файле знаете?

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

Screenshot_1.jpg

Link to post
Share on other sites

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

Edited by Gorman
Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites
10 минут назад, premisse сказал:

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

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.