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

问题描述 投票:0回答:1

我的媒体查询不适用于此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>

选择器/类?让我确认我已添加,因此必须是其他内容。

html css styles media-queries
1个回答
0
投票

图像溢出了容器?

img{ width: 100% }
© www.soinside.com 2019 - 2024. All rights reserved.