Почему мои медиа-запросы не работают для этого указанного c элемента?

Question

Мои медиазапросы не применяются к этому div .col-3, хотя он работает для других. Это проблема с селектором / классом?

@media screen and (min-width: 600px) and (max-width: 719px) {
 
  .col-3 {
          flex: 0 50%;
          max-width: 50%;
  }
  
}

<div class="row fade show">
    <div class="col-3">
        <div class="ProductBox_root__13DPQ">
            <div class="ProductBox_photo__Xs8BM"><img
                    src="https://images.pexels.com/photos/245208/pexels-photo-245208.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=3&amp;h=750&amp;w=1260"
                    alt="Aenean Ru Bristique 1" class="ProductBox_image__1ECK5">
                <div class="ProductBox_sale__1WcD7">sale</div>
                <div class="ProductBox_buttons__uyJNx"><a href="#" class="Button_small__2W39u">Quick View</a><a href="#"
                        class="Button_small__2W39u"><svg aria-hidden="true" focusable="false" data-prefix="fas"
                            data-icon="shopping-basket" class="svg-inline--fa fa-shopping-basket fa-w-18 " role="img"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                            <path fill="currentColor"
                                d="M576 216v16c0 13.255-10.745 24-24 24h-8l-26.113 182.788C514.509 462.435 494.257 480 470.37 480H105.63c-23.887 0-44.139-17.565-47.518-41.212L32 256h-8c-13.255 0-24-10.745-24-24v-16c0-13.255 10.745-24 24-24h67.341l106.78-146.821c10.395-14.292 30.407-17.453 44.701-7.058 14.293 10.395 17.453 30.408 7.058 44.701L170.477 192h235.046L326.12 82.821c-10.395-14.292-7.234-34.306 7.059-44.701 14.291-10.395 34.306-7.235 44.701 7.058L484.659 192H552c13.255 0 24 10.745 24 24zM312 392V280c0-13.255-10.745-24-24-24s-24 10.745-24 24v112c0 13.255 10.745 24 24 24s24-10.745 24-24zm112 0V280c0-13.255-10.745-24-24-24s-24 10.745-24 24v112c0 13.255 10.745 24 24 24s24-10.745 24-24zm-224 0V280c0-13.255-10.745-24-24-24s-24 10.745-24 24v112c0 13.255 10.745 24 24 24s24-10.745 24-24z">
                            </path>
                        </svg> ADD TO CART</a></div>
            </div>

Позвольте мне подтвердить, что я добавил

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

, поэтому это должно быть что-то еще.

Answer 1

Надеюсь, что этот медиа-запрос находится внизу вашего css файла. Если это не так, свойства переопределяются. Пожалуйста, проверьте и проверьте, не перезаписаны ли свойства элемента на вкладке css

.

Answer 2

Я решил применить RWD, добавив отзывчивые классы для реагирования компонента следующим образом:

className='col-12 col-sm-6 col-lg-3'>

Это работает для меня, я надеюсь, что кто-то найдет это полезным. Спасибо за все ваши ответы!

Answer 3

Вы также можете нацелить div по Id

<div id="custom" class="col-3">


  #custom.col-3 {
      flex: 0 50%;
      max-width: 50%;
      border: 2px solid red
   }

https://jsfiddle.net/brnt49je/

Answer 4

изображение переполняет контейнер?

img{ width: 100% }