How to control column display based on screen size?

[BentonsBacon]

Hi all, I think this is pretty simple but it's going to need some context so I'm going to put quite a bit of info here.

I'm adding some custom trust badges to our Cart page. I've hard-coded them above the Checkout button and everything is fine, but my lack of Liquid knowledge is showing itself. I'd like to control how many columns they're displayed based on the size of the screen. I like how they're displayed on full screen, mobile, and tablet. But there's a third size that I'm not a fan of and would like to now show.

Examples below:

• Full screen, 4 columns I like it: https://www.awesomescreenshot.com/image/30764304?key=b6f8544a43e3c24996cf4158d91dc9a1
• Tablet, 2 columns, like it: https://www.awesomescreenshot.com/image/30764722?key=5819b0d3005d292166c710f22d2a5f97
• Mobile, 1 column, I like it: https://www.awesomescreenshot.com/image/30764770?key=58bd8ff11663007c2573f03f8f1bb0f9
• Whatever size this is, 3 columns, do not like it: https://www.awesomescreenshot.com/image/30764810?key=58a7f467be4f1616732e8572c97be7c5

So the real question is: is there a way to force the page to go from displaying 4 columns to 2?

My code itself is simple, pasted below. Thanks for any guidance!

  <style>
    .container {
      max-width: 1400px;
    }

    .trustbadges {
      background-color: #F6F5F2;
      border: 0px solid black;
      border-color: #6F95C0;
      color: #363636;
      text-align: left;
      text-decoration: none;
      font-family: "Open Sans", sans-serif;
      display: inline-block;
      font-size: 15px;
      margin: 2px 2px;
      cursor: arrow;
      padding: 10px 20px;
      border-radius: 5px;
      height: 70px;
      width: 325px

    }
  </style>

  <center>

    <div class="container">
     
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td><a href="URL" target="_blank">Free Shipping</a> on orders<br />over $99 (contigeous USA)</td></tr></tbody></table></div>
      
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td>Top Quality Guarantee<br /><a href="URL" target"_blank">Our Guarantee</a></td></tr></tbody></table></div>
      
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td>Excellent Customer Service<br /><a href="URL" target="_blank">Contact Us</a></td></tr></tbody></table></div>
      
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td>Pay your way & save with<br />flexible <a href="URL" target="_blank">payment options</a></td></tr></tbody></table></div>
    </div>

  </center>

[Ahsan_ANC]

Simple way is that you use display flex property and use the media queries to force a display for a specific resolution. What is the resolution of the screen that you 3 in one row and 4th on another?

[BentonsBacon]

Thank you for the reply!

I see, I think I've seen that done before, just don't know how to implement it myself.

According to Chrome, 3 columns start on 1078px and end on 1410px. Before 1078px it's two columns and after 1410px it's four. Is that what you mean?

[Ahsan_ANC]

here is the updated code. plz try this

<style>
      .mycontainer {
     
      display:flex;
      flex-wrap:wrap;
    }

    .trustbadges {
      background-color: #F6F5F2;
      border: 0px solid black;
      border-color: #6F95C0;
      color: #363636;
      text-align: left;
      text-decoration: none;
      font-family: "Open Sans", sans-serif;
      display: inline-block;
      font-size: 15px;
      margin: 2px 2px;
      cursor: arrow;
      padding: 10px 20px;
      border-radius: 5px;
      height: 70px;
      width: 325px

    }

@media(min-width:1100px ){
  
  .mycontainer .trustbadges{
    flex: 1;
  }
}
</style>

  <center>

    <div class="mycontainer">
     
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td><a href="URL" target="_blank">Free Shipping</a> on orders<br />over $99 (contigeous USA)</td></tr></tbody></table></div>
      
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td>Top Quality Guarantee<br /><a href="URL" target"_blank">Our Guarantee</a></td></tr></tbody></table></div>
      
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td>Excellent Customer Service<br /><a href="URL" target="_blank">Contact Us</a></td></tr></tbody></table></div>
      
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td>Pay your way & save with<br />flexible <a href="URL" target="_blank">payment options</a></td></tr></tbody></table></div>
    </div>

  </center>

[BentonsBacon]

Cool, thank you! I can see what you're going for. Here's what happens: https://www.awesomescreenshot.com/video/10233854?key=a7deda7f61bbabaa4bc136f0a0c1cbd1

I removed the flex from the icons because it wasn't working well with them. The container centering anymore and I'm still getting the 3 columns, but I can see where it's heading 😀

[Ahsan_ANC]

I can't understand it 🤔. Have you found the solution?

[BentonsBacon]

Not yet... I removed display:flex; from the container and now it's centering again - basically doing what it was doing before. Still seeing the 3 columns from 1078px - 1410px though 🤔

I appreciate any other ideas you've got - thank you so much!

EDIT: Meant to show another video: https://www.awesomescreenshot.com/video/10234615?key=64cffab92bfb1437201133885f91b010

[Ahsan_ANC · Accepted solution]

plz try this new code

<style>
.container {
          
    max-width: 1400px;
    
    }

    .trustbadges {
      background-color: #F6F5F2;
      border: 0px solid black;
      border-color: #6F95C0;
      color: #363636;
      text-align: left;
      text-decoration: none;
      font-family: "Open Sans", sans-serif;
      display: inline-block;
      font-size: 15px;
      margin: 2px 2px;
      cursor: arrow;
      padding: 10px 20px;
      border-radius: 5px;
      height: 70px;
      width: 325px

    }
@media(min-width:1077px) and (max-width:1411px){
  .container{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .container .trustbadges:nth-child(odd){
    justify-self: end;
  }
}
</style>

 <center>

    <div class="container">
     
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td><a href="URL" target="_blank">Free Shipping</a> on orders<br />over $99 (contigeous USA)</td></tr></tbody></table></div>
      
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td>Top Quality Guarantee<br /><a href="URL" target"_blank">Our Guarantee</a></td></tr></tbody></table></div>
      
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td>Excellent Customer Service<br /><a href="URL" target="_blank">Contact Us</a></td></tr></tbody></table></div>
      
<div class="trustbadges"><table><tbody><tr><td><img src="IMAGE" height="42" width="72"></td><td>Pay your way & save with<br />flexible <a href="URL" target="_blank">payment options</a></td></tr></tbody></table></div>
    </div>

  </center>

[BentonsBacon]

That works! I had to change:

@media(min-width:1077px) and (max-width:1411px) to @media(min-width:700px) and (max-width:1400px)

But now I think it's just about perfect: https://www.awesomescreenshot.com/video/10239684?key=8169a5635536812931e5ee521ded715d

I owe you a coffee - or, tea. 🍵 👍

[Ahsan_ANC]

glad to see it working.

on a lighter note, always use a grid or flexbox when designing items. It will be really helpful for a responsive look.

[BentonsBacon]

I will - thank you. I'm definitely going to start going deep into Liquid tutorials. I need to get up to speed.

[Ahsan_ANC]

That's nice. Best of luck

I am also starting theme building.