На декстопе проблемы полоса прокрутки и с изображениями что-то странное, как решить?

Question

[olya_097]

https://codepen.io/anon/pen/NEyxoQ

Comments

[Stalker_RED]

Что решить, что странное? Мы же не знаем как оно должно быть.

[olya_097]

Stalker_RED, Stalker_RED, мобильная


планшет


десктоп

[olya_097]

Stalker_RED, декстоп 1440px
планшет 768
мобилка 320

[Ankhena]

В стандартной модели расчета ширина элемента складывается из width, padding и border.
У блока .promo__main написано ширина 100% и еще 80px отступов. И вот она прокрутка на 80px.
Варианты:
1. использовать calc для ширины calc(100% - 80px)
2. задать box-sizing: border-box.
3. можно задавать не padding, а margin детям.
Второй вариант мне кажется более благоразумным.

[olya_097]

Ankhena, всем элементам? *{box-sizing:border-box;} ?

[Ankhena]

olya_097, всем-то зачем?

[olya_097]

Ankhena, извините, не нужно.
Правда даже когда я прописала. то на мобилке и десктопе не совсем корректно отображается

[Ankhena]

olya_097,
Там слишком много "не так".
Начиная с того, что всё, что выходит за крайние направляющие должно растягиваться на всю ширину окна. Т.е. кот на зеленом фоне это всегда половина окна при >768.
Сам кот с зеленым фоном это не div, а либо фон родителя и bg size, либо псевдоэлемент.
Соответственно, если он будет фоном, с z-index всё станет проще.
В picture у source не правильно стоят числа.

Answer 1

[noteblock]

изображение может всё таки обернуть? background для img - как то не очень.
если убрать для .promo__main width:100% - всё ок.

UPD.
*{box-sizing:border-box;} добавьте

Comments

[olya_097]

допустим
но на других разрешениях далеко не все в норме

[noteblock]

для других разрешений используйте медиазапросы и фиксите в них уже

[olya_097]

noteblock, как бы их и использовала в данном случае

Answer 2

[lazarev_s_a]

убери width: 100% у .promo__main. Ты даешь 100% для элемента который и так занимает всю ширину.
Отступы у тебя из за padding в том же .promo__main , если хочешь чтобы элемент не "выпирал" и ширина блока не менялась при добавлении отступов, то пропиши box-sizing: border-box;

Comments

[olya_097]

всем элементам? *{box-sizing:border-box;} ?

[olya_097]

и почему width: 100% портит всё? если у него итак есть по умолчнию
не совсем понимаю

[lazarev_s_a]

Box-sizing только для .promo__main.
Если ты зайдешь в панель разработчика то увидишь что только этот элемент занимает пустое пространство справа, из-за padding размер блока увеличивается и появляется полоса прокрутки. Если ты хочешь задавать padding или border, и вместе с тем что бы размер блока оставался прежним, то добавь к нему свойство box-sizing: border-box;
А по поводу width: 100%, то не правильно указывать размеры в процентах элементу у которого родитель сам указан в процентах, не имея явных размеров. А т.к. у тебя этот элемент (.promo__main) блочный, он и так займет всю ширину и указывать ее нет необходимости.
https://webref.ru/css/width - про width и border-box