媒体查询不起作用和最大宽度问题

Question

Having some issues with my max-width for my logo-bar_item class.我的 logo-bar_item class 的最大宽度存在一些问题。 I have set 2 media queries at two break points but they are not working either.我在两个断点设置了 2 个媒体查询，但它们也不起作用。 Thanks for your help I am quite new to html/css感谢您的帮助我对 html/css 很陌生

https://codepen.io/bradscanvas/pen/NWWqZza https://codepen.io/bradscanvas/pen/NWWqZza

<!DOCTYPE html>

<div id="shopify-section-1557218386577" class="shopify-section index-section"><div class="logo-wrapper"> 
    <ul class="logo-bar">      
        <li class="logo-bar_item">    
            <img src="//cdn.shopify.com/s/files/1/1784/1613/files/billboard_1755fdfa-a418-4240-b8b9-b6bc022d92fe_160x160@2x.png?v=1561106441" alt="" class="logo-bar_image">     
        </li>   
          <li class="logo-bar_item">
            <img src="//cdn.shopify.com/s/files/1/1784/1613/files/buzzfeed_49c1df15-d0c0-4dac-8678-56aed46a2b32_160x160@2x.png?v=1561106477" alt="" class="logo-ba=_image">
        </li>
        <li class="logo-bar_item">                   
            <img src="//cdn.shopify.com/s/files/1/1784/1613/files/forbes_05276adf-5d18-4e64-92b7-1ee27f3118ea_160x160@2x.png?v=1561106497" alt="" class="logo-bar_image">      
        </li>    
        <li class="logo-bar_item">       
            <img src="//cdn.shopify.com/s/files/1/1784/1613/files/inc_ca0e061a-f3e2-406e-a8b2-546eb9bdba98_160x160@2x.png?v=1561107433" alt="" class="logo-bar_image">     
        </li>    
        <li class="logo-bar_item">      
            <img src="//cdn.shopify.com/s/files/1/1784/1613/files/entrepreneur_984311dd-a59c-4639-b916-a705f2e67f9f_160x160@2x.png?v=1561110682" alt="" class="logo-bar_image">        
        </li>
    </ul>
</div>
</div>

.logo-bar {
-webkit-font-smoothing: antialiased;
font-size: 16px;
font-family: Lato,sans-serif;
font-style: normal;
font-weight: 400;
color: #3d4246;
line-height: 1.5;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
margin-bottom: -25px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

.logo-bar_image {
    display: block;
    margin: 0 auto;
}

.ul ol {
    margin: 0;
    padding: 0;
}

.logo-bar_item {
  padding: 20px;
  vertical-align: middle;
  margin: 10px 0px;
  max-width: 180px;

}

media screen and (max-width: 1200px) 
.logo-bar_item {
    max-width: 130px;
  }
media screen and (max-width: 600px)
.logo-bar_item {
    max-width: 100px;
}

Each logo should be seperated evenly and decrease in size as the screen size decreases每个标志应均匀分开，并随着屏幕尺寸的减小而减小

Answer 1

@media screen and (max-width: 1200px){
  .logo-bar_item {
    max-width: 130px;
  }
}
@media screen and (max-width: 600px){
  .logo-bar_item {
    max-width: 100px;
  }
}

You just skipped @ and {}您刚刚跳过了@和{}

And, If you want to make img follow the parent's max-width , add it而且，如果你想让img跟随父母的max-width ，添加它

.logo-bar_item > img {
  width:100%;
}

媒体查询不起作用和最大宽度问题

问题描述

1 个解决方案

解决方案1
2 2019-10-10 01:42:49

媒体查询不起作用和最大宽度问题

问题描述

1 个解决方案

解决方案1 2 2019-10-10 01:42:49

解决方案1
2 2019-10-10 01:42:49