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

Solved
madmosaic
Tourist
5 0 2

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_Anthony
Shopify Partner
436 167 168

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 | Blog

View solution in original post

Made4uo-Ribe
Shopify Partner
4111 941 1147

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

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 6 (6)
Made4uo-Ribe
Shopify Partner
4111 941 1147

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
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


madmosaic
Tourist
5 0 2

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

Earcave PPU
Made4uo-Ribe
Shopify Partner
4111 941 1147

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

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


madmosaic
Tourist
5 0 2

this worked too !  thank you  for your time

Earcave PPU
Beae_Anthony
Shopify Partner
436 167 168

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 | Blog
madmosaic
Tourist
5 0 2

excellent! that worked! 

Earcave PPU