Поможете исправить несколько багов в верстке?

Буду короток.
У меня есть сайт вот он на git hub https://github.com/Zhenya-Tureysky/Affliate.git скачайте и посмотрите кому не лень
Ну или вот он на Git Hub Pages https://zhenya-tureysky.github.io/Affliate_pages_A...
На нем есть несколько багов над которыми я уже толкусь немало времени

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

Честно не знаю как но у меня каким-то чудом решилась эта проблема но зато я точно знаю что она есть здесь https://zhenya-tureysky.github.io/Denis-Novik/

Во вторых при попытке сделать адаптивную верстку все мое содержимое равномерно сжимается и подстраивается для более меньших разрешений обычно решение этой проблемы лишь в одном meta теге но у меня что з ним что без него все одно и тоже. Во всех курсах которые я смотрел использовался этот тег но у меня что-то нечего.
От я делаю какой-то сайт по видео с ютуба делаю все точно как делает автор у меня все хорошо начинаю верстать сайт самостоятельно и опять все повторяется все одно и тоже Мне почему-то кажется что дело в моей разметке что-то я делаю не так как все.

Поэтому буду очень ОЧЕНЬ благодарен тому кто не полениться скачает и скажет что я делал не так. Хоть я и мало на это надеюсь.
Также буду рад если кто-то укажет мне на мои другие ошибке в коде не связанные с вопросом
  • Вопрос задан
  • 182 просмотра
Пригласить эксперта
Ответы на вопрос 2
@Pavstyuk
Первое что бросилось в глаза. Вы жестко ограничиваете ширину контэйнера:
.container {
  margin: 0 auto;
  width: 1150px;
}

Попробуйте так, должно стать гораздо лучше:
.container {
  margin: 0 auto;
  max-width: 1150px;
  width: 100%;
}


Далее вместо:
.blog_wrapper {
  display: flex;
}

Добавьте перенос:
.blog_wrapper {
  display: flex;
  flex-wrap: wrap;
}

Это же касается всех остальных блоков, где вы используете display: flex.
Ответ написан
Starina_js
@Starina_js
Веб-программист
У вас сетка (grid) не спроектирована. Посмотрите пример сетки на flexbox , допустим у того же bootstrap getbootstrap.com
Адаптивная сетка создается на media-запросах https://developer.mozilla.org/ru/docs/Web/CSS/@media

Пока не будет ограничений по сетке, все будет "плавать"
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы