Magento 2 Category Page Mobile View Product Grid - change to

[imfahadmanaa6c]

Currently on category pages mobile view, products show 2 wide in the product grid.

I want to change this so products are only 1 wide in the product grid.

I believe I need to change something in stumble guy mod:

app\design\frontend\Magento\<my Theme>\Magento_Catalog\web\css\source\module\_listings.less

But am not technical enough to know which bit or what I need to change!

[Ankit Jasani]

Hi @imfahadmanaa6c ,

Assuming you have custom theme already available which properly inherit from Magento/luma. Ensure your theme.xml and registration.php are correctly set up. If you're unsure, please confirm in reply. So I can guide you for the same.

You need to override below file

vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/module/_listings.less

Overide file contains below details - Only for mobile

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
	.product {
		&-item {
			.products-grid & {
	            width: 100% !important;
	            margin-left: calc(~'(100% - 60%) / 2') !important;
	        }
	    }
	}
}

Reference screenshot attached after above modification.

Problem Solved? Accept as Solution!

Thanks

Ankit

[andeeknits208b]

This appears to be my post copied from stack exchange.

I have tried ading your code on the original luma _listings.less file as described but im still showing 2 columns on the frontend after clearing all caches, upgrading, compiling etc.

Update:
After a bit of rejigging where I pasted the code, it is now working!
The only thing is, it does not fill the whole width, which would be nice!

andeeknits

[phamvietch1cf8]

The cool thing is that no two levels of Geometry Dash Spam Test are exactly the same, each attempt is a new experience, with a different rhythm, different length, and its own challenges.