Media query not working & issues with max-width

by brad walls   Last Updated October 10, 2019 02:26 AM

Having some issues with my max-width for my logo-bar_item class. I have set 2 media queries at two break points but they are not working either. Thanks for your help I am quite new to html/css

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/[email protected]?v=1561106441" alt="" class="logo-bar_image">     
        </li>   
          <li class="logo-bar_item">
            <img src="//cdn.shopify.com/s/files/1/1784/1613/files/[email protected]?v=1561106477" alt="" class="logo-ba=_image">
        </li>
        <li class="logo-bar_item">                   
            <img src="//cdn.shopify.com/s/files/1/1784/1613/files/[email protected]?v=1561106497" alt="" class="logo-bar_image">      
        </li>    
        <li class="logo-bar_item">       
            <img src="//cdn.shopify.com/s/files/1/1784/1613/files/[email protected]?v=1561107433" alt="" class="logo-bar_image">     
        </li>    
        <li class="logo-bar_item">      
            <img src="//cdn.shopify.com/s/files/1/1784/1613/files/[email protected]?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



Answers 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

.logo-bar_item > img {
  width:100%;
}
zynkn
zynkn
October 10, 2019 01:42 AM

Related Questions


Updated June 14, 2015 02:11 AM

Updated September 16, 2016 08:12 AM

Updated March 11, 2017 05:26 AM

Updated June 16, 2018 05:26 AM