Media query not working & issues with max-width

Question

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

Your two media queries need to have { } wrapping around the .logo-bar_item rule: media screen and (max-width: 1200px) { .logo-bar_item { ... } } — Obsidian Age
– Obsidian Age, Commented Oct 10, 2019 at 1:42

kyun · Accepted Answer · 2019-10-10 02:25:36Z

2

@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%;
}

edited Oct 10, 2019 at 2:25

answered Oct 10, 2019 at 1:42

kyun

10.4k9 gold badges36 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Media query not working & issues with max-width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related