Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Reduce space between product fields on product listing page

Reduce space between product fields on product listing page

Views: 756

Results 1 to 4 of 4
17 Feb 2026, 6:40 AM
#1
dml73 avatar

dml73

Zen Follower

Join Date:
Oct 2007
Posts:
413
Plugin Contributions:
0

Reduce space between product fields on product listing page

Bootstrap 3.7.7-beta1

How can I reduce/remove the white space between the product fields on the product listing pages? So that the fields themselves gets wider. In attached image, I mean the orange frame on the sides of the fields. Apparently its "margin-right: 15px;" and "margin-left: 15px;". I want to set these to 0px, however I can't find that in any css file.

Attachment 21169

17 Feb 2026, 8:25 AM
#2
pilou2 avatar

pilou2

Zen Follower

Join Date:
Jun 2008
Location:
Japan
Posts:
366
Plugin Contributions:
6

Re: Reduce space between product fields on product listing page

This in a bootstrap library remotely loaded. To override it, got includes/templates/bootstrap/css folder and rename dist-site_specific_styles.php file to site_specific_styles.php. Then edit this file and add this between the <style> and </style> tags:

    .card-deck .card {
    margin-right: 15px;
    margin-left: 15px;
    }

Or this, depending on what part you want to change:

    .col {
        padding-right: 15px;
        padding-left: 15px;
    }

Then adjust numbers as you like. Be careful that theses changes are site wise.

17 Feb 2026, 8:31 AM
#3
pilou2 avatar

pilou2

Zen Follower

Join Date:
Jun 2008
Location:
Japan
Posts:
366
Plugin Contributions:
6

Re: Reduce space between product fields on product listing page

This also have some effect:

    .p-3 {
        padding: 1rem !important;
    }
17 Feb 2026, 12:01 PM
#4
dml73 avatar

dml73

Zen Follower

Join Date:
Oct 2007
Posts:
413
Plugin Contributions:
0

Re: Reduce space between product fields on product listing page

Perfect thanks! Option two and three did the job in my case.