Define Padding arround Product cards

Ask the community for help and support.
Post Reply
loop
VIP Member
VIP Member
Posts: 230
Joined: Thu Mar 25, 2021 12:26 pm
Has thanked: 7 times
Been thanked: 3 times

Define Padding arround Product cards

Post by loop »

Hi All
i'm wondering how i can have less padding thenn 15px between the products.
I know i could do:

Code: Select all

.contentText > .row > .col{
  padding-left: 7px;
  padding-right: 7px;
}
But thenn the title will not follow as there is also a padding defined there. Is there a simple / elegant solution to define that "global"?
You do not have the required permissions to view the files attached to this post.
Last edited by loop on Tue Sep 28, 2021 6:33 am, edited 1 time in total.
User avatar
Kofod95
VIP Member
VIP Member
Posts: 605
Joined: Sat Feb 06, 2021 7:38 pm
Has thanked: 80 times
Been thanked: 141 times

Re: Define Padding arround Product cards

Post by Kofod95 »

I think .card for the cards should work - I seem to remember that's what I did. For the title at the top, I think you could target the main wrapper there as well, but I don't remember the name (sorry Mr. Shinoda)

//Daniel

//Daniel
I'm not smart, but sometimes even a blind chicken can find a corn.
Here are a lot of corns: Phoenix user guide
User avatar
edfaught
Posts: 49
Joined: Mon Oct 26, 2020 3:22 pm
Has thanked: 4 times
Been thanked: 2 times

Re: Define Padding arround Product cards

Post by edfaught »

I believe that padding is set in the _grid_framework.scss file by the .col class. That might keep your quest interesting...
loop
VIP Member
VIP Member
Posts: 230
Joined: Thu Mar 25, 2021 12:26 pm
Has thanked: 7 times
Been thanked: 3 times

Re: Define Padding arround Product cards

Post by loop »

if i would change the ".col" class setting, then the padding is changed everywhere, not only on the product view...
Omar_one
VIP Member
VIP Member
Posts: 481
Joined: Fri Oct 25, 2019 5:06 pm
Has thanked: 48 times
Been thanked: 27 times

Re: Define Padding arround Product cards

Post by Omar_one »

loop wrote: Mon Sep 27, 2021 2:46 pm if i would change the ".col" class setting, then the padding is changed everywhere, not only on the product view...
you can try this
override the product_listing.php file (copy it from templates/default/includes/components/ to templates/override/includes/components/)
then find on the copied file
this line

Code: Select all

 $prod_list_contents .= '<div class="col mb-2">';

change it to

Code: Select all

$prod_list_contents .= '<div class="col mb-2 px-2">';
then add this to user.css (templates/override/static/user.css)

Code: Select all

.px-2 {
  padding-left:7px !important;
  padding-right:7px !important;
}
loop
VIP Member
VIP Member
Posts: 230
Joined: Thu Mar 25, 2021 12:26 pm
Has thanked: 7 times
Been thanked: 3 times

Re: Define Padding arround Product cards

Post by loop »

hi Omar_one

Thank you for your help! the Problem is, whenn i do that:
on the left (from column left to the first box of the product_listing) is thenn also only the 7px space and i like the 15px space there (as the everything, everywhere has always this space from categories box to the title for example)
so i need a solution to keep the space there and only reduce betwen the product's....
loop
VIP Member
VIP Member
Posts: 230
Joined: Thu Mar 25, 2021 12:26 pm
Has thanked: 7 times
Been thanked: 3 times

Re: Define Padding arround Product cards

Post by loop »

just figured it out, thank you!
Post Reply