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

[mattpermute]

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

[dfiroz]

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;
}
}

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

Thanks.

[mattpermute]

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

[dfiroz]

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

[mattpermute]

@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

[AbdullahShahz03]

Can you tell me where to find this theme.css or theme.scss.liquid

These are not showing in my asset folder

@dfiroz

[AbdullahShahz03]

I cant find theme.css or theme.scss.liquid in assets

I think shopify rename or move this somewhere else