Минимальная ширина и максимальная ширина не работают на div и изображении

Question

Я пытаюсь добавить минимальную и максимальную ширину к «плитке» className, однако то, что я сейчас использую в своем CSS, не работает. Как только мой размер экрана становится меньше 480 пикселей, он прыгает от этого:

На это:

Высота остается неизменной, однако она не меняет ширину при изменении размера экрана.

@media screen and (max-width: 480px) {
 .tile {
    position: relative;
    height: 192px;
    padding-bottom: 12px;
    width: 100%;
}
.tile-image {
    height: 192px;
    margin-left: 24px;
    object-fit: cover;
    position: absolute;
    border-radius: 4px;
    max-width: 432px;
    min-width: 272px;
    z-index: 1;
}
.tile-gradient {
    background-blend-mode: darken;
    background-image: linear-gradient(228deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.36));
    height: 192px;
    object-fit: cover;
    border-radius: 4px;
    z-index: 2;
    position: absolute;
    margin-left: 24px;
    margin-right: 24px;
    max-width: 432px;
    min-width: 272px;
 }
}

@media screen and (min-width: 481px) {
.tile {
    position: relative;
    width: 432px;
    height: 192px;
    padding-bottom: 12px;
}
.tile-image {
    width: 432px;
    height: 192px;
    margin-left: 24px;
    object-fit: cover;
    position: absolute;
    border-radius: 4px;
    z-index: 1;
}
.tile-gradient {
    background-blend-mode: darken;
    background-image: linear-gradient(228deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.36));
    width: 432px;
    height: 192px;
    object-fit: cover;
    border-radius: 4px;
    z-index: 2;
    position: absolute;
    margin-left: 24px;
    margin-right: 24px;
 }
}

<div className="tile">
  <div className="image">
    <div className="tile-gradient"></div>
    <img className={`tile-image ${!post.availability && "is-available"} `} src={post.img} alt=""/>
  </div>
</div> 

Любая идея о том, как исправить это и сделать его отзывчивой, была бы отличной, так как она не перепрыгивает из одного размера в другой автоматически. Заранее спасибо, пожалуйста, спросите, нужна ли какая-либо другая информация.

Answer 1

Это происходит потому, что вы не используете процент ширины экрана для уменьшения ширины элемента tile. Он напрямую изменится с 100% width на конкретный c 432px, как вы установили его внутри запроса @media screen and (min-width: 481px). Старайтесь избегать заданной ширины c пикселей и корректируйте ее в процентах. Что-то вроде

@media screen and (max-width: 480px) {
 .tile {
    position: relative;
    height: 192px;
    padding-bottom: 12px;
    width: 100%;
}
}

@media screen and (min-width: 481px) {
.tile {
    position: relative;
    width: 80%; // change this with the desired width of the element. Avoid using px
    height: 192px;
    padding-bottom: 12px;
}
}

При изменении размера экрана происходит постепенное изменение ширины, если вместо указания c пикселей вы используете проценты.