How to change the mobile collection page grid to 2 columns instead of 3

mattpermute
Excursionist
42 0 17

Hey All,

I am looking to change the product view toggle on mobile from 3 wide, to 2 wide, is there a way to achieve this?

Here is the link to the page: https://apparis.com/collections/shop_all

Thanks

MM

Screen Shot 2021-07-15 at 2.26.37 PM.pngScreen Shot 2021-07-15 at 2.26.41 PM.png

0 Likes
dfiroz
Excursionist
19 3 6

You can simply follow the steps for getting rid of this problem.

 

First Go To Themes

Action> Edit Code> Assets Folder

theme.css or theme.scss.liquid

 

paste the below code at the bottom of your theme and click on Save. That's it.

 

 

@media (max-width: 575px){
.col-xs-4 {
	width: calc(100% / 2 ) !important;
}
}

 

Screenshot(6).png

 

 

If this post helps you to solve your issue, like this post and accept this as solved.

Thanks.

If helpful, then please Like and Accept Solution.
Want to modify or custom changes on store, hire me.
- Feel free to contact me on imfirozhossain@gmail.com regarding any help
mattpermute
Excursionist
42 0 17

@dfiroz amazing! is there an easy way to change the default view to 2 images across, and 3 across as the toggle?

0 Likes
dfiroz
Excursionist
19 3 6

Possible but I would like to suggest you not to change If you change those things it will occur few problems.

If helpful, then please Like and Accept Solution.
Want to modify or custom changes on store, hire me.
- Feel free to contact me on imfirozhossain@gmail.com regarding any help
0 Likes
mattpermute
Excursionist
42 0 17

@dfiroz ok understood.

do you have a solution I can try?

if it creates problems I can then show my team why this won't work very well

Thanks

-MM

 

0 Likes