CSS Grid не полностью отвечает

Я кодирую задачу от Frontend Mentor (Вот этот), и мне это удалось. Тем не менее, я не смог сделать его 100% отзывчивым. Это работает только тогда, когда ширина страницы достигает той, которую я указал в медиа-запросе. Содержимое сетки не настраивается, пока я уменьшаю или увеличиваю окно браузера, как должно.

Этот — пример того, как это должно работать.

body,
html {
  background-color: hsl(210, 46%, 95%);
  font-family: 'Barlow Semi Condensed', sans-serif;
  Font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.container {
  width: 1440px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "t1 t1 t2 t3" "t4 t5 t5 t3";
  grid-gap: 2.5rem;
}

.testimonial01,
.testimonial02,
.testimonial05 {
  color: white;
}

.testimonial04,
.testimonial03 {
  color: hsl(217, 19%, 35%);
}

.container>div {
  padding: 2rem;
}

.author {
  display: flex;
  width: 180px;
  align-items: center;
}

span,
h3 {
  opacity: 50%;
  line-height: 1.6;
}

img {
  width: 3rem;
  border-radius: 50%;
  border: 1px solid white;
  margin-right: 20px;
}

.testimonial01 {
  grid-area: t1;
  background-color: hsl(263, 55%, 52%);
  border-radius: 15px;
}

.testimonial02 {
  grid-area: t2;
  background-color: hsl(217, 19%, 35%);
  border-radius: 15px;
}

.testimonial03 {
  grid-area: t3;
  background-color: hsl(0, 0%, 100%);
  border-radius: 15px;
}

.testimonial04 {
  grid-area: t4;
  background-color: hsl(0, 0%, 100%);
  border-radius: 15px;
}

.testimonial05 {
  grid-area: t5;
  background-color: hsl(219, 29%, 14%);
  border-radius: 15px;
}

@media screen and (max-width: 600px) {
  .container {
    width: 375px;
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "t1" "t2" "t3" "t4" "t5";
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap" rel="stylesheet">
  <title>Testimonials</title>
</head>

<body>
  <div class="container">

    <div class="testimonial01">

      <div class="author">
        <img src="./images/image-daniel.jpg" alt="">
        <p>Daniel Clifford <br>
          <span> Verified Graduate</span></p>
      </div>

      <h1>I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.</h1>

      <h3>" I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly
        thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ”</h3>

    </div>

    <div class="testimonial02">

      <div class="author">
        <img src="./images/image-jonathan.jpg" alt="">
        <p>Jonathan Walters <br>
          <span> Verified Graduate</span></p>
      </div>

      <h1>The team was very supportive and kept me motivated</h1>

      <h3>“ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself. ”</h3>

    </div>

    <div class="testimonial03">

      <div class="author">
        <img src="./images/image-kira.jpg" alt="">
        <p>Kira Whittle <br>
          <span> Verified Graduate</span></p>
      </div>

      <h1>Such a life-changing experience. Highly recommended!</h1>

      <h3>“ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from professionals who can help me learn programming step by step. I was encouraged to enroll by a former student of theirs who can only say wonderful things
        about the program. The entire curriculum and staff did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team project, in particular, was outstanding. It took my learning to the next level in a way
        that no tutorial could ever have. In fact, I’ve often referred to it during interviews as an example of my developent experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 100% recommend! ”</h3>

    </div>

    <div class="testimonial04">

      <div class="author">
        <img src="./images/image-jeanette.jpg" alt="">
        <p>Jeanette Wittle <br>
          <span> Verified Graduate</span></p>
      </div>

      <h1>An overall wonderful and rewarding experience</h1>

      <h3>“ Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love. ”</h3>

    </div>
    <div class="testimonial05">

      <div class="author">
        <img src="./images/image-patrick.jpg" alt="">
        <p>Patrick Abrams <br>
          <span> Verified Graduate</span></p>
      </div>

      <h1>Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy.</h1>

      <h3>“ The staff seem genuinely concerned about my progress which I find really refreshing. The program gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer. The standard is above the rest.
        You will get the personal attention you need from an incredible community of smart and amazing people. ”</h3>

    </div>

  </div>
</body>

</html>

Превратите HTML и CSS в исполняемый фрагмент

Zach Jensz 06.04.2022 17:18

Обычно вы хотите использовать min-width медиа-запросы для добавления сложности вместо медиа-запросов максимальной ширины.

Zach Jensz 06.04.2022 17:20
.container { width: 1440px;} которые не кажутся мне отзывчивыми
Zach Jensz 06.04.2022 17:22

@ZachJensz Там есть ссылка редактировать...

Heretic Monkey 06.04.2022 17:43
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
4
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте добавить значение min-width в свой медиа-запрос и изменить width в классе контейнера на max-width.

Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

Community 06.04.2022 18:01

Другие вопросы по теме