4 column banner Debut Theme - mobile issues

Solved
Tourist
3 1 0

Hi all,

 

I implemented a solution for a 4 column banner according to this post: Banner with 4 columns Debut Theme . It works great on a big screen. But on mobile it keeps the 4 columns 1 row layout and some columns are not visible anymore. It needs to be responsive to resize to 2 rows 2 columns.

 

Any help would be appreciated.

 

Kind regards,

Zinneman the Shopify rookie

0 Likes
Shopify Expert
2506 423 532

Send me your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
3 1 0
Shopify Expert
2506 423 532
Send password of store here or pm me
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

Success.

Shopify Expert
2506 423 532

Add this css in asset->theme.scss file at bottom:

@media only screen and (max-width: 767px) { .highlights-banners { flex-wrap: wrap -webkit-flex-wrap: wrap height: auto } .highlight-banners-count-4 .highlights-banners-block { width: 50%; } }
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

Success.

Tourist
3 1 0

I added it, but it broke the CSS on the website, so I made a minor adjustment. 

I simply added semi-colons to the .highlights-banners attributes

Now it works like a charm. 

@media only screen and (max-width: 767px) { 
  .highlights-banners { flex-wrap: wrap; -webkit-flex-wrap: wrap; height: auto } 
  .highlight-banners-count-4 .highlights-banners-block { width: 50%; } 
}

Thx for your help!

 

 

 

0 Likes