How to reduce the space between the Product Picture and Product Title (On Product Page & Mobile)

Solved
Highlighted
New Member
3 0 0

Hi,

 

I am currently using Brooklyn theme (not sure if that matters). I want to reduce the white space between the Product Picture and the Product Title (On Product Page & Mobile Browsing). Any ideas on how to reduce this space?

0 Likes
Highlighted

This is an accepted solution.

Hello @taekcool ,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media screen and (max-width: 590px) {
.product-single__meta {
	padding-top: 0 !important;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
New Member
3 0 0

Amazing. Worked like a charm! Thanks for the magic!!

0 Likes
Highlighted
Shopify Expert
667 170 234

Hi, @taekcool ,

This is Evita from On The Map.

 

Can you add your store URL?

 

Best, Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Highlighted
Excursionist
16 0 3

Hi, 

I tried doing the same. But it is not working for me. Can you help please. My page is not published as yet . https://jewelrybyruhh-com.myshopify.com/collections/nalini/Nalini

0 Likes
Highlighted
New Member
3 0 0

Can you tell me how can i reduce space between the Product Image and Product Title in the grid.

 

Trim This SpaceTrim This Space

0 Likes
Highlighted
New Member
8 0 0

I need help on my store I'm having a really weird spacing on my product page between the product title and the product images. There are no margins to edit and I am extremely confused where the code is even causing the space. It is extremely odd that it can only happens when it's on mobile.

Screenshot (16).pngScreenshot (17).png

0 Likes
Highlighted

Hello technokul,
To reduce space between the Product Image and Product Title in the grid.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.product-card .product-card__image-container {
    margin-bottom: 30px;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

Hello zephwong,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
8 0 0

Sure, Here you go!

The spacing problem happens on all tablet and mobile devices. Link: https://www.hanawebstore.com/collections/frontpage/products/dinosaur-hoodie

Screenshot (16).pngScreenshot (17).png

0 Likes