How to reduce the space between the Product Picture and Product Title

Store Design
1

Hi,

I want to reduce the white space between the Product Picture and the Product Title, any ideas on how to reduce this space?

Thanks for helping, my website is https://glamermaid.com/

8b23228ba8174622b19f949def64155.jpg
8b23228ba8174622b19f949def64155.jpg1080×2127 109 KB

1 Like
2

Try adding this code at the bottom of theme.min.css file

.product-item .wrapper-compare {
min-height: 5px;
}

.products-grid .grid-item{
margin-bottom: 15px;
}
3

@Glamermaid

Please add the following code at the bottom of your CSS file.

@media (max-width: 1199px){
.new-arrivals-product .wrapper-compare {
    display: none !important;
}
.new-arrivals-product .products-grid .grid-item {
    margin-bottom: 0px !important;
}
}

Hope this works.

Thanks!

4

Hi Nick,

Thanks for helping! It works but there’s still a little large space between the price of the product and next product, do you have a way to shorten then?

Glamermaid_0-1626921540555.png
Glamermaid_0-1626921540555.png1080×1958 177 KB

5

Hi DMW

Thanks, could you let me know which CSS file I am looking for? I have theme-settings.css.liquid, theme.min.css.liquid, theme-styles-responsive.css.liquid and theme-styles.css.liquid

1 Like
6

@Glamermaid

It seems theme.min.css.liquid is the correct one but it doesn’t work then you can try with other files.

This is the new code.

@media (max-width: 1199px){
.new-arrivals-product .wrapper-compare {
    display: none !important;
}
.new-arrivals-product .products-grid .grid-item {
    margin-bottom: -10px !important;
}
}

Let me know if this works.

1 Like
7

Hi DMW,

Thanks a lot! It works!

1 Like
8

@Glamermaid

It’s my pleasure to help you.

If helpful then please Like and Accept Solution

1 Like