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.

[stumbleff86e55]

You’re right — that layout is controlled by your theme’s CSS (specifically in _listings.less). To make product cards display one per row on mobile, you just need to override the grid width in your mobile breakpoint.

Try adding something like this in your theme file:
app/design/frontend/Magento/<YourTheme>/Magento_Catalog/web/css/source/module/_listings.less

@Media(max-width: 767px) { .products-grid .product-item { width: 100% !important; // makes each product take full width max-width: 100%; } .products-grid .product-item-info { margin: 0 auto; } }

After saving, run the following commands to recompile and deploy the styles:

php bin/magento setup:static-content:deploy -f php bin/magento cache:flush

That will make products display one per row on mobile screens.

If you’re using a custom or third-party theme (like one named “stumble guys hack all skins and emotes”), the file path or CSS class names might differ slightly — but the same @Media (max-width: 767px) rule and width: 100% adjustment will do the trick.

[stumbleff86e55]

 

After saving, run the following commands to recompile and deploy the styles:

 

php bin/magento setup:static-content:deploy -f php bin/magento cache:flush

That will make products display one per row on mobile screens.

If you’re using a custom or third-party theme (like one named “

document clearing services in uae

”), the file path or CSS class names might differ slightly — but the same @Media (max-width: 767px) rule and width: 100% adjustment will do the trick.