Пытался разобраться с медиа запросами, появилась проблема для ширины экрана 425px
все работает, для остальных двух разрешений отключаються некоторые стили, но если убрать все медиа запросы, то для обычного расширения экрана все отлично, а с ними не работают некоторые стили
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
justify-content: center;
}
.back {
display: flex;
justify-content: center;
background-image: url(cuba-logo1.png);
height: 700px;
width: 1440px;
background-position: center;
background-blend-mode: normal, color;
}
@media screen and (max-width: 1024px) {
.back {
height: 600px;
width: 1024px;
background-position: center;
}
}
@media screen and (max-width: 425px) {
.back {
height: 291px;
width: 425px;
background-position: bottom center;
}
}
.border {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 1360px;
height: 620px;
border: 2px solid #ecb84c;
margin-top: 40px;
border-radius: 4px;
}
@media screen and (max-width: 1024px) {
.border {
width: 944px;
height: 530px;
margin-top: 32px;
margin-right: 10px;
}
@media screen and (max-width: 425px) {
.border {
width: 375px;
height: 255px;
margin-top: 15px;
}
}
.text-container {
width: 527px;
height: 227px;
text-align: center;
margin: 0;
}
.header {
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
font-family: Georgia;
font-size: 200px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: white;
}
@media screen and (max-width: 1024px) {
.header {
font-size: 180px;
}
}
@media screen and (max-width: 425px) {
.header {
font-size: 90px
}
.small-text-container {
margin-top: 644px;
position: absolute;
text-align: center;
}
@media screen and (max-width: 1024px) {
.small-text-container {
margin-top: 545px;
}
}
@media screen and (max-width: 425px) {
.small-text-container {
margin-top: 260px;
}
.small-text {
color: #fff;
font-size: 24px;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
font-family: Georgia;
font-size: 24px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
}
@media screen and (max-width: 425px) {
.small-text {
font-size: 14px;
}
<div class="back">
<div class="border">
<div class="text-container">
<div class="header">Cuba</div>
</div>
</div>
<div class="small-text-container">
<div class="small-text">Explore the world of Casas & Cadillacs</div>
</div>
</div>