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

[madmosaic]

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. 

site is : https://earcave.com

[Beae_Anthony · 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

[Made4uo-Ribe]

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:
• 

[madmosaic]

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

[Made4uo-Ribe · 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:

[madmosaic]

this worked too !  thank you  for your time

[Beae_Anthony · 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

[madmosaic]

excellent! that worked!