Re: Padding between collection items - Prestige theme

Padding between collection items - Prestige theme

emilyaugstudios
Pathfinder
122 1 58

Hi, I was wondering how to remove some of the padding between the items on my collection pages. For reference I am using the prestige theme and I have already added the recommended code below to the 'theme.liquid' section to make the products display full width.

<style>
.product-card__info {
position: absolute !important;
align-self: self-end !important;
padding-left: 10px !important;
padding-bottom: 5px !important;
}
.v-stack.justify-items-center.gap-1 {
justify-items: left !important;
}
.color-scheme.color-scheme--scheme-1 .container {
margin: 0 !important;
max-width: 100% !important;
}
</style>

 

URL - https://927103-16.myshopify.com/

 

The kind of padding size I'm wanting -

Screenshot 2024-08-13 at 12.51.11.pngScreenshot 2024-08-13 at 12.51.48.png

 

Thank you! Emily 😁

Replies 9 (9)

Moeed
Shopify Partner
5774 1565 1858

Hey @emilyaugstudios 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-list {
    row-gap: 2px !important;
    column-gap: 4px !important;
}
</style>

RESULT:

Moeed_0-1723550559655.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


emilyaugstudios
Pathfinder
122 1 58

Hi Moeed, that worked thank you. My only issue is that it appears to left align the content, leaving white space on the right hand side. Do you know how to fix this?

 

Thank you as always!🙂

Screenshot 2024-08-13 at 13.13.23.png

Moeed
Shopify Partner
5774 1565 1858

Hey @emilyaugstudios 

 

Try this updated code.

<style>
.product-list {
    row-gap: 2px !important;
    column-gap: 2px !important;
    place-content: center !important;
}
</style>

RESULT:

Moeed_0-1723552338084.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


emilyaugstudios
Pathfinder
122 1 58

Hi Moeed, there still seems to be some padding either side. When I remove the code you recommended to try, it displays full width properly, with no extra white space padding. Any thoughts?🤔

 

Without code - Screenshot 2024-08-13 at 12.50.52.png

 

With code -

Screenshot 2024-08-13 at 13.30.44.png

emilyaugstudios
Pathfinder
122 1 58

Hi, thank you for all the help but unfortunately nothing is working without leaving weird padding on the page so I think I will just leave this for now. Maybe it's something about the prestige theme that doesn't allow for full width products and small row padding. Thank you again.

BSSCommerce-HDL
Shopify Partner
2305 833 904

Hi @emilyaugstudios 

for space right side, you can try this code above </style> following previous solution:

 

<style>
.product-list {
    row-gap: 2px !important;
    column-gap: 4px !important;

 
    margin: 0 -20px!important;
}
</style>

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

emilyaugstudios
Pathfinder
122 1 58

Hi! Thank you for the help, at first I thought it worked but as you can see it pushes the first row of products off the screen a bit, this theme is harder to work with 😅 Anymore thoughts on this? Thank you!Screenshot 2024-08-13 at 13.43.31.png

BSSCommerce-HDL
Shopify Partner
2305 833 904

Hi @emilyaugstudios

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

<style>
.collection__main .product-card__info {
  padding-left: 0px !important;
  padding-bottom: 0px !important;
}
</style>

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Rahul_dhiman
Shopify Partner
599 118 118

Hello @emilyaugstudios 
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file.

.product-list {
row-gap: 2px !important;
column-gap: 2px !important;
}

result
12.png

If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167