Reducing gap between collection image and price

Solved

Reducing gap between collection image and price

Regd1
Tourist
24 0 2

Hello, 

 

I am using the Shopify Dawn 2.0 theme. I am using the product title as the image in my product collection/ featured product collection. At the moment there is a large gap between the product image and the product price. I would like the gap to be reduced to bring it closer to the price. I have included an example in the below image and arrows to show the space i would like reduced. I have tried multiple things so I would really appreciate support with this.

 

Screenshot 2023-01-10 at 12.44.56.png

Accepted Solutions (5)

PageFly-Victor
Shopify Partner
7865 1785 3076

This is an accepted solution.

Hi @Regd1 

This is Victor from PageFly

 

You can try this code by following these steps: 

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

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file -> Save

 

.card__information {

    padding: 0 !important;

}

h3.h4.product-title {

    margin-bottom: -10px !important;

}

 

Hope that my solution works for you.

Best regards,

Victor | PageFly

 

View solution in original post

PageFly-Victor
Shopify Partner
7865 1785 3076

This is an accepted solution.

@Regd1 

You can try with this code:

.color-background-1.isolate.gradient .grid--4-col-desktop .grid__item {
    max-width: 100% !important;
    width: unset !important;
}
.color-background-1.isolate.gradient .grid__item {
    flex-grow: unset !important;
}

View solution in original post

PageFly-Victor
Shopify Partner
7865 1785 3076

This is an accepted solution.

HI @Regd1 

You can use this code: 


h1.product-single__title {
    margin-bottom: 0 !important;
}

 

PageFlyVictor_0-1673396594364.png

 

View solution in original post

PageFly-Victor
Shopify Partner
7865 1785 3076

This is an accepted solution.

Hi @Regd1 
Please try with this code:

@media screen and (max-width: 767px){
	.card__content {
    padding: 1px !important;
}
}

PageFlyVictor_0-1673420304543.png

 


 

View solution in original post

PageFly-Victor
Shopify Partner
7865 1785 3076

This is an accepted solution.

@Regd1 
You want to look like this?

PageFlyVictor_0-1673422852845.png

 

h3.h4.product-title {
    width: 170px;
}

 

View solution in original post

Replies 19 (19)

GemPages
Shopify Partner
5624 1261 1230

Hi @Regd1,

 

Can you give me your page URL( with pass if your store password is enabled) so I can check it for you? 

 

Kind & Best regards,
GemPages Support Team

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Regd1
Tourist
24 0 2

Ujjaval
Shopify Partner
1242 197 210

@Regd1 Can you share  your store url ?

Regd1
Tourist
24 0 2
Ujjaval
Shopify Partner
1242 197 210

@Regd1 Put below css into base.css file (0nline store->themes->edit code->assets->base.css)

.card__content {
      padding: 0px !important;
}

Ujjaval_0-1673356699434.png

For reducing more space you need to crop the image cause image surrounded by white color .

Ollie
Shopify Staff
2489 456 415

Hey @Regd1.

 

Thanks for reaching out.

 

I appreciate that you have let us know which theme you are using on your online store, that is very helpful! Looking into the Dawn theme, I noticed that reducing the gap between the product image and product price is not available using the Theme Editor. However, you could make a change of coding to the theme to have it displayed as you would like. Since the Dawn theme is designed and supported by Shopify, we can use free design time for Shopify themes to have our internal team make the changes on your behalf.

 

10-12-73583-42964

 

If you are interested in using the design time, you will need to login to your store using the Contact Us page. This will allow us to securely verify you as the store owner before speaking directly with a Support Advisor.

 

Let me know if you have any questions.

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

PageFly-Victor
Shopify Partner
7865 1785 3076

This is an accepted solution.

Hi @Regd1 

This is Victor from PageFly

 

You can try this code by following these steps: 

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

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file -> Save

 

.card__information {

    padding: 0 !important;

}

h3.h4.product-title {

    margin-bottom: -10px !important;

}

 

Hope that my solution works for you.

Best regards,

Victor | PageFly

 
Regd1
Tourist
24 0 2

Thanks great, how do I reduce the size at each side of the image? 

PageFly-Victor
Shopify Partner
7865 1785 3076

This is an accepted solution.

@Regd1 

You can try with this code:

.color-background-1.isolate.gradient .grid--4-col-desktop .grid__item {
    max-width: 100% !important;
    width: unset !important;
}
.color-background-1.isolate.gradient .grid__item {
    flex-grow: unset !important;
}
Regd1
Tourist
24 0 2

Once I click into the product how do I reduce the space between the title image and the price? Image attached below

Screenshot 2023-01-10 at 16.57.59.png

PageFly-Victor
Shopify Partner
7865 1785 3076

This is an accepted solution.

HI @Regd1 

You can use this code: 


h1.product-single__title {
    margin-bottom: 0 !important;
}

 

PageFlyVictor_0-1673396594364.png

 

Regd1
Tourist
24 0 2

Hi 

When I look on the mobile grid version I want the products to be displayed 2 by 2. the 2 products below seem to be too big to do so. Can you help?

IMG_1081.jpeg

PageFly-Victor
Shopify Partner
7865 1785 3076

This is an accepted solution.

Hi @Regd1 
Please try with this code:

@media screen and (max-width: 767px){
	.card__content {
    padding: 1px !important;
}
}

PageFlyVictor_0-1673420304543.png

 


 

Regd1
Tourist
24 0 2

Great, how do I get the yellow to match the same size on the top and bottom?

PageFly-Victor
Shopify Partner
7865 1785 3076

This is an accepted solution.

@Regd1 
You want to look like this?

PageFlyVictor_0-1673422852845.png

 

h3.h4.product-title {
    width: 170px;
}

 

Regd1
Tourist
24 0 2

How can I made all of the yellow backgrounds the same width regardless of the number of characters on the desktop version?  @PageFly-Victor 

Screenshot 2023-02-13 at 16.38.52.png

Regd1
Tourist
24 0 2

@PageFly-Victor  are you able to help? 

Regd1
Tourist
24 0 2

@PageFly-Victor  can you help?

Lyndajh
Excursionist
21 1 3

Victor

I wanted to say thank you. It worked perfectly for me in the Spotlight theme.