为什么我的媒体查询不适用于此特定元素？

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"

                            </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

我决定通过向 React 组件添加响应类来应用 RWD，如下所示：className='col-12&nbsp;col-sm-6&nbsp;col-lg-3'>这对我有用，我希望有人会发现这很有用。感谢您的所有回答！

Answer 3

图像溢出容器？img{&nbsp;width:&nbsp;100%&nbsp;}

Answer 4

您还可以通过 Id 定位 div<div id="custom" class="col-3">&nbsp; #custom.col-3 {&nbsp; &nbsp; &nbsp; flex: 0 50%;&nbsp; &nbsp; &nbsp; max-width: 50%;&nbsp; &nbsp; &nbsp; border: 2px solid red&nbsp; &nbsp;}https://jsfiddle.net/brnt49je/