Отзывчивый CSS не корректируется правильно ⇐ Html

[Anonymous]

Я сделал инструмент в HTML CSS и пытаюсь сделать его отзывчивым на всех устройствах. Я не уверен, почему, но это не выглядит слишком хорошо. Это либо разгорело вместе, либо карта не верна. < /P>
Это то, что я имею: < /p>


.sprint-page {
position: relative;
min-height: 800px;
padding: 1rem 2rem;
text-align: left;
width: 20%;
margin: 0;
top: 0;
z-index: 5;
background-color: #e2e1e1;
box-shadow: rgba(85, 84, 85, 0.041) 3px 0px 0px;
}

.attribution {
display: block;
position: relative;
top: 550px;
font-style: italic;
color: #555;
background-color: #ffffff5d;
padding: 10px 20px;
margin: 20px 0;
font-size: 0.9em;
}

.sprint-layout {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 2rem;
box-sizing: border-box;
}

.sprint-settings {
position: absolute;
left: 2rem;
top: 260px;
width: 250px;
display: flex;
flex-direction: column;
gap: 1rem;
z-index: 10;
}

.sprint-card {
position: absolute;
right: 3rem;
top: 150px;
width: 1300px;
height: 600px;
background-image: url("../Images/sprints/test.jpg");
background-size: cover;
background-position: center;
color: white;
padding: 2rem;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
transition: opacity 0.1s linear;
opacity: 1;
}

.sprint-info {
background-color: rgba(0, 0, 0, 0.6);
padding: 2rem;
border-radius: 10px;
text-align: center;
width: 50%;
}

.sprint-info h2 {
margin: 0;
font-size: 2.5rem;
}

#sprint-timer {
font-size: 4rem;
margin-top: 1rem;
font-weight: bold;
}

.sprint-settings label {
font-weight: bold;
color: #333;
}

.sprint-settings select,
.sprint-settings button {
padding: 0.5rem;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
}

.sprint-settings button.btn {
margin-top: 1rem;
cursor: pointer;
background-color: #77946e;
color: white;
border: none;
}

.sprint-settings button.btn:hover {
background-color: rgb(80, 134, 82);
}

.motivation-text {
text-align: center;
margin-top: auto;
font-size: 1.1rem;
font-weight: bold;
color: #ffffff;
opacity: 0;
transition: opacity 1s ease-in-out;
}

@keyframes glow {
0%, 100% { text-shadow: 0 0 10px #ffd700; }
50% { text-shadow: 0 0 20px #ff4500; }
}

.sprint-complete {
font-size: 2rem;
color: #ffd700;
animation: glow 1.5s infinite;
text-align: center;
margin-top: 1rem;
}

.sprint-info {
width: 100%;
padding: 1rem;
font-size: 0.9rem;
}

.sprint-info h2 {
font-size: 1.5rem;
}

#sprint-timer {
font-size: 2rem;
}

.motivation-text {
font-size: 0.9rem;
}

.tooltip {
display: inline-block;
margin-left: 5px;
color: #414141;
background-color: #c7baba;
border-radius: 50%;
width: 18px;
height: 18px;
text-align: center;
font-size: 12px;
line-height: 18px;
font-weight: bold;
cursor: pointer;
position: relative;
z-index: 1000;
}

.tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 125%;
background-color: #333;
color: #fff;
padding: 6px 10px;
border-radius: 5px;
white-space: normal;
width: 200px;
font-size: 0.85rem;
z-index: 1000;
opacity: 1;
transition: opacity 0.3s;
}

.tooltip:hover::before {
content: "";
position: absolute;
bottom: 110%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333;
z-index: 1001;
}

@media (max-width: 480px) {
.sprint-settings {
position: absolute;
top: 240px;
left: 0.1rem;
gap: 0.8rem;
font-size: 0.9rem;
z-index: 10;
width: 30%;
padding: 0.5rem;
}

.sprint-card {
position: absolute;
top: 200px;
right: 0.5rem;
width: 62%;
height: 300px;
padding: 1rem;
border-radius: 8px;
background-size: cover;
background-position: center;
color: white;
}
}

@media (max-width: 768px) {
.sprint-settings {
position: absolute;
top: 240px;
left: 0.1rem;
gap: 0.8rem;
font-size: 0.9rem;
z-index: 10;
width: 30%;
padding: 0.5rem;
}

.sprint-card {
position: absolute;
top: 200px;
right: 0.5rem;
width: 62%;
height: 300px;
padding: 1rem;
border-radius: 8px;
background-size: cover;
background-position: center;
color: white;
}
}

@media (max-width: 1024px) {
.sprint-card {
position: absolute;
top: 200px;
right: 0.5rem;
width: 62%;
height: 300px;
padding: 1rem;
border-radius: 8px;
background-size: cover;
background-position: center;
color: white;
}
}

@media (max-width: 1200px) {
.sprint-page {
width: 30%;
padding: 0.5rem;
}

.sprint-page h1 {
font-size: 20px;
}

.sprint-page p {
font-size: 14px;
}

.sprint-layout {
display: flex;
flex-direction: row;
overflow-x: auto;
padding: 0 1rem;
}

.sprint-settings {
position: absolute;
top: 240px;
left: 0.1rem;
gap: 0.8rem;
font-size: 0.9rem;
z-index: 10;
width: 30%;
padding: 0.5rem;
}

.sprint-card {
position: absolute;
top: 200px;
right: 0.5rem;
width: 64%;
height: 400px;
padding: 1rem;
border-radius: 8px;
background-size: cover;
background-position: center;
color: white;
}
}< /code>

Timer Sprint
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
All background images were pulled from Freepik.





Sprint Duration
?


5 Minutes
10 Minutes
20 Minutes
30 Minutes
45 Minutes
60 Minutes



Background Image
?


Knight and Dragons
Knight and Castle
Castle on Cliff
Ancient Ruins
Sunken City
Final Battle



Ambience
?


None
Forest
Night
Wind Howling
Fireplace
Birds



Volume
?



Start Sprint
Reset Sprint


Toggle Darkmode:









Ready to Sprint!
00:00
Test


< /code>
< /div>
< /div>
< /p>
Я попытался регулировать ширину каждого ответа @Media, но он все еще перекрывается. Я ожидаю, что каждый div сохранил свой размер, чтобы он отзывчив для всех устройств.

Подробнее здесь: https://stackoverflow.com/questions/796 ... -correctly