4 column banner Debut Theme - mobile issues

Solved
Highlighted
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
Highlighted
Shopify Expert
2910 497 667

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
Highlighted
Tourist
3 1 0
Highlighted
Shopify Expert
2910 497 667
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
Highlighted

Success.

Shopify Expert
2910 497 667

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
Highlighted

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