2

The products on the grid layout are cramped together and I'd like to have spacing between products.

How is this done?

6
  • Use either padding or margin to grid list Commented Oct 27, 2017 at 3:59
  • Can you also tell me which file(s) I need to change?
    – Bas
    Commented Oct 27, 2017 at 4:56
  • Share a screenshot , I ll tell you class name and files which to change Commented Oct 27, 2017 at 4:57
  • topgrepen.nl/screenshot.png
    – Bas
    Commented Oct 27, 2017 at 5:09
  • 1
    Thank you for your time. Yes I use ultimo. I will try the code you provided when I get home from work.
    – Bas
    Commented Oct 27, 2017 at 8:09

1 Answer 1

1

See detailed answers here how to change existing CSS / LESS or add new CSS

Change module specific CSS / LESS

In your case for adding space between products on grid layout

these are the responsible classes

.item product .product-item see screenshot for better understanding , you need to inspect to find the classes.

  • Reduce width or add padding/margin to the LIST
  • Adjust all other related CSS to the list container for better look

enter image description here

You need to extend your module _listings.less file at below location in your custom theme

/app/design/frontend/vendor-name/theme-name/Magento_Catalog/web/css/source/module/_listings.less

Two options, either you can extend your module css or can create _extend.less

I hope this will help you

5
  • This is the correct location of file in your theme " app\design\frontend\Infortis\base\Magento_Catalog\web\css\source\module_listings.less " Commented Oct 27, 2017 at 8:11
  • I use _extend.less and added 12px margin to ".product-item" ".product-items" and ".items" but when I hover over a product it shifts to the left. I can't seem to find where to change that. you can see for yourself at www.topgrepen.nl
    – Bas
    Commented Oct 27, 2017 at 16:00
  • I've been trying to alter the list containers width but there are so many I can't figure out which ones to change.
    – Bas
    Commented Oct 29, 2017 at 23:07
  • Ill check it today Commented Oct 29, 2017 at 23:32
  • I saw and it works fine, not shifting to the left on hover Commented Oct 30, 2017 at 3:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.