Почему не работает адаптивная верстка в %?

Question

[kobnuhok]

Делаю адаптивный дизайн, в пикселях работает все нормально, последний медиа запрос при указании max-width в процентах работает криво.не могу понять причину

https://codepen.io/kobnuhok/pen/zYzOmQz вот CSS код

Comments

[Ankhena]

Может, сделаете песочницу, в которой видно, что именно у вас работает криво?
Всю простыню css можно не таскать за собой.

[kobnuhok]

Ankhena, https://eleventh-officers.000webhostapp.com/

открываете адаптив и посмотрите

[Ростислав]

kobnuhok,
Что за дич, сделай wrapper и его уже тяни, поэтому все и криво

.header-container,
                    .hero-container,
                    .hero-image,
                    .about-container,
                    .readers,
                    .footer-container {
                        max-width: 90%;
                    }

[kobnuhok]

Ростислав, а какая разница в названии класса?

[Ankhena]

kobnuhok,

открываете адаптив и посмотрите

Смотрю.
Проценты вообще не при делах, как и предполагалось.
Посмотрите на блоки, которые вываливаются. Например, на читателей. Нормально разложите все дочерние элементы и проблем не будет.

[kobnuhok]

Ankhena, а они не должны отображаться в процентах от своего изначального размера?так же как и отступы

[Ростислав]

kobnuhok, В разобщенности, нет четкой иерархии от единого ко многому, например все это нагромождение должно выстраиваться в родителе, а он уже менять размер, что бы не думать о куче блоков а разграничить ответственность

Ппц, кончилась суточная норма комментов. . .

Ankhena, Может там нет никакого препроцессора, он же наверняка исходники скинул?

[Ankhena]

Ростислав, никто не мешает делать этот wrapper миксином в препроцессоре. А не выделять в отдельный класс и вставлять в разметку.

[Ankhena]

kobnuhok,

а они не должны отображаться в процентах от своего изначального размера?так же как и отступы

Эммм...

Ширина в % считается от ширины родителя.
Впрочем, как и отступы, в том числе и вертикальные.

[kobnuhok]

Ankhena, один хрен.даже если указать 99% то оно ломается при переходе последнего брейкпоинта
нормально работают только читатели

[Ankhena]

kobnuhok, "читатели" у вас вообще вываливаются из контентной ширины.
Браузер пытается их уместить и ломает все остальное.
И фиксированные margin уберите.

Так постепенно распутаете весь клубок. А то там черт ногу сломит, что вы понаписали.

[Pavel-ww]

kobnuhok, посмотрите уроки Артема Исламова на ютьюбе и научитесь верстать :). Не троллинг, совершенно серьезно говорю. Такой дичи не было бы

[kobnuhok]

Pavel-ww, именно его и смотрю,но пытаюсь делать сам.
Просто это практика курс веб-старт,урок 14 адаптивная верстка.

Просто на последней брейк поинте он просто указывает проценты и всё

Я и пришёл узнать что я не так сделал

[Pavel-ww]

kobnuhok, вы много что сделали не так. Самая главная ошибка в контейнере, о чем уже написали выше.
Вот общепринятая разметка

<header class="header">
      <div class="container">
           <!-- ваш код здесь -->
    </div>
</header>
<section class="section-1">
      <div class="container">
           <!-- ваш код здесь -->
    </div>
</section>
<section class="section-2">
      <div class="container">
           <!-- ваш код здесь -->
    </div>
</section>
<!--и так далее -->

container является ограничителем ширины контента, для него задается max-width в точках остановки, центрируется его положение и паддинги слева справа. Больше никаких свойств ему задавать не надо. Все остальное делается средствами ваших конструкций внутри контейнера.

Проблема не в процентах на последнем брейкпойнте, а в целом в вашей вёрстке. Если вёрстка выполнена нормально, то проценты на последнем брейкпойнте будут нормально работать.

Блок Читатели вообще ужасен. Изображения внутри двух тегов p. Вряд ли в уроках Артема такое где-то есть. Для того что бы сделать хорошую сетку на флексах или гридах, html разметка должна быть такой.

<section class="section">
            <div class="container">
                <div class="reader-img">
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                    <div class="image-wrapper">
                        <img class="imgread" src="" alt="">
                    </div>
                </div>
            </div>
        </section>