In product grid how to adjust space between product image, description, price and the next item?

Solved

In product grid how to adjust space between product image, description, price and the next item?

madmosaic
Tourist
8 0 3

I've tried a few other suggestions in editing the code, but none of them seemed to work for our theme SUPPLY.02

Here's a few screenshots.. how do we clean this up and tighten up the product by moving the Title closer to the Image, and removing the space under the item.  We are trying to use the Osaria media player, and it made the current justification worse. 

 

Screen Shot 2023-09-27 at 11.47.54 AM.pngScreen Shot 2023-09-27 at 11.48.46 AM.png

 

site is : https://earcave.com

Earcave PPU
Accepted Solutions (2)

Beae_Cass
Shopify Partner
447 167 187

This is an accepted solution.

Hi @madmosaic ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

 

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

<style>
a.product-grid-item, .product-grid-item {
    margin-bottom: unset;
}
.product-grid-image {
    margin-bottom: 5px !important
}
</style>

 

Best regards,

Anthony

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Demo Template

View solution in original post

Made4uo-Ribe
Shopify Partner
10132 2403 3037

This is an accepted solution.

Try this one for then.

Same instruction.

span.h1.medium--left {
    margin: 0px !important;
}
.product-grid-image {
    height: 185px !important;
}
.grid-item.small--one-half.medium--one-fifth.large--one-fifth p {
    margin-top: 25px;
}

And Save.

Result:

Made4uoRibe_0-1695833767772.png

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
10132 2403 3037

Hi @madmosaic 

TRy this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.product-grid-image {
    margin-bottom: 12px;
}
.grid-item.small--one-half.medium--one-fifth.large--one-fifth p {
    margin-bottom: 5px;
}
.grid-item {
    padding-left: 10px;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1695832217419.png
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
madmosaic
Tourist
8 0 3

thank you for your reply, how would you move the product closer to the product below it? 

Earcave PPU
Made4uo-Ribe
Shopify Partner
10132 2403 3037

This is an accepted solution.

Try this one for then.

Same instruction.

span.h1.medium--left {
    margin: 0px !important;
}
.product-grid-image {
    height: 185px !important;
}
.grid-item.small--one-half.medium--one-fifth.large--one-fifth p {
    margin-top: 25px;
}

And Save.

Result:

Made4uoRibe_0-1695833767772.png

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
madmosaic
Tourist
8 0 3

this worked too !  thank you  for your time

Earcave PPU

Beae_Cass
Shopify Partner
447 167 187

This is an accepted solution.

Hi @madmosaic ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

 

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

<style>
a.product-grid-item, .product-grid-item {
    margin-bottom: unset;
}
.product-grid-image {
    margin-bottom: 5px !important
}
</style>

 

Best regards,

Anthony

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Demo Template
madmosaic
Tourist
8 0 3

excellent! that worked! 

Earcave PPU
Kyle4
Visitor
1 0 0

Hello I can't seem to make it work on my theme