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

[Anonymous]

Я пытаюсь создать отзывчивый компонент изменятеля с следующими HTML и CSS: < /p>


body {
display: flex;
justify-content: center;
background: white;
margin: 0;
}

.changelog-container {
border: 2px solid black;
border-radius: 12px;
padding: 2rem;
max-width: 500px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.changelog-header {
text-align: center;
}

.changelog-header p {
color: #777;
}

.timeline {
position: relative;
display: grid;
grid-template-columns: 1fr 12px 1fr;
margin: 0 auto;
grid-gap: 40px 10px;
}

.timeline::before {
position: absolute;
top: 0;
bottom: 0;
left: calc(50% + 1px);
width: 2px;
background-color: black;
content: '';
}

.timeline-item {
grid-column: span 3;
display: grid;
grid-template-columns: subgrid;
grid-auto-flow: dense;
align-items: center;
}

.timeline-date {
text-align: right;
}

.timeline-item::before {
grid-column: 2;
width: 12px;
height: 12px;
background-color: black;
border-radius: 50%;
border: 2px solid white;
content: "";
}

.changelog-footer{
display:flex;
justify-content: center;
margin-top: 2rem;
}
.changelog-footer button{
background-color: blue;
color:#ffffff;
border-radius: 10%;
}< /code>







ChangeLog Component






Changelog
Here's everything we have shipped in the past few days


September 3, 2024
Announcing Projects on Frontend Roadmap


August 28, 2024
Build your learning habits with learning streaks


August 25, 2024
Git and GitHub Roadmap


August 22, 2024
Submit your project solution and get feedback


August 15, 2024
Backend Project Ideas


August 10, 2024
Redis roadmap


August 1, 2024
Changelog page to help you stay in the loop



Visit Complete Changelog




< /code>
< /div>
< /div>
< /p>
Эта страница отвечает устройствам ширины, которые составляют 500 пикселей, заданные следующими CSS: < /p>
.changelog-container {
border: 2px solid black;
border-radius: 12px;
padding: 2rem;
max-width: 500px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
< /code>
Поскольку этот код отвечает на устройства ширины менее 500 пикселей, мне нужно добавить медиа -запрос, чтобы он выглядел отзывчивым? src="https://i.sstatic.net/XNz5Rpcg.png" />

I tried testing the second responsive layout on Browser Dev Tools and it works perfectly
:

Подробнее здесь: https://stackoverflow.com/questions/797 ... responsive