Почему при просмотре сайта с ноутбука элемент вылазит за пределы блока-обертки?

Question

[Norum]

Проверил свой сайт со старого ноутбука с разрешением 800х600 и почему гамбургер вылазит за пределы .wrapper-а, но если смотреть с ПК при таком же разрешении, то все нормально. В чем проблема?

Сайт https://ct61276.tmweb.ru/

Ноутбук


ПК

Comments

[Максим]

для всех изображений в слайдере напишите : object-fit: cover;
и на ноуте не вижу я кнопку

[Сергей delphinpro]

Вылазит на всех разрешениях. Да оно и должно вылазить, судя по стилям. Как вы смотрите, хз

[Norum]

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

[Norum]

Brasileiro, зачем писать object-fit: cover ?

[Максим]

Norum, тогда у вас все изображения будут прапорциональны в данный момент они у вас то растянуты то сплюснуты

[WapSter]

И почему оно не должно вылезать? Ты его выдернул из потока и к оберткам он никак не привязан.

[Norum]

Brasileiro, у меня картинка сделана фоном блока, object-fit: cover вроде не влияет при таком раскладе. Может переделать на конструкцию блок и внутри картинка?

У мен так

<div class="main-gal owl-carousel">
                    <div class="img">
                        <div class="pbg" style="background-image: url(img/main-slider-1.jpg);"></div>
                    </div>
                    <div class="img">
                        <div class="pbg" style="background-image: url(img/main-slider-2.jpg);"></div>
                    </div>
                    <div class="img">
                        <div class="pbg" style="background-image: url(img/main-slider-3.jpg);"></div>
                    </div>
                    <div class="img">
                        <div class="pbg" style="background-image: url(img/main-slider-4.jpg);"></div>
                    </div>
                </div>

[Norum]

WapSter, я прописал для wrapper свойство position: relative, но это не помогло. Как правильно сделать?

[Максим]

Norum, ну если фоном, тогда background-size: cover

[Norum]

Brasileiro, Я просто пытался сделать так, чтобы на минимальном разрешении 1024х768 слайдер не выходил за нижние границы


А если переделать в конструкцию блок и внутри картинка то изображение не будет растягиваться, НО тогда слайдер при маленьком разрешении будет выходить за нижние границы

[Максим]

Norum, а если картинками то у вас установлено width height 100% ?

[Norum]

Brasileiro, для картинки или блока?

[Максим]

Norum, для изображения - выставлен размер в высоту и в ширину 100% ?

[Максим]

Norum, вот вижу исправил - вот так уже выглядит очень хорошо

[Norum]

Brasileiro, я просто видимо чрезмерно подзапарился на тем, чтобы на маленьких мониторах (именно мониторах, а не планшетах или смартфонах) все вмещалось, а в итоге палку перегнул и понаписал лишнего

[Максим]

Norum, но всё же мне интересно - почему вы выбрали именно owl для слайдера ?

[Norum]

Brasileiro, я на нем более менее понимаю как работать