How to control column display based on screen size?

Solved

How to control column display based on screen size?

BentonsBacon
Excursionist
26 0 2

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:

 

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>

 

Accepted Solution (1)
Ahsan_ANC
Shopify Partner
1409 254 325

This is an 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>
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

View solution in original post

Replies 11 (11)

Ahsan_ANC
Shopify Partner
1409 254 325

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?

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
BentonsBacon
Excursionist
26 0 2

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
Shopify Partner
1409 254 325

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>
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
BentonsBacon
Excursionist
26 0 2

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
Shopify Partner
1409 254 325

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
BentonsBacon
Excursionist
26 0 2

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
Shopify Partner
1409 254 325

This is an 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>
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
BentonsBacon
Excursionist
26 0 2

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
Shopify Partner
1409 254 325

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.

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
BentonsBacon
Excursionist
26 0 2

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

Ahsan_ANC
Shopify Partner
1409 254 325

That's nice. Best of luck

 

I am also starting theme building.

 

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search