Re: Enlarge gap between Product picture and title on Mobile?

Enlarge gap between Product picture and title on Mobile?

KimGottwald
Pathfinder
180 0 28

On mobile I have the problem that the product picture can be seen in the title..

Bildschirmfoto 2024-06-11 um 2.04.25 PM.png

Replies 3 (3)

Rishihuptech
Shopify Partner
616 113 125

Hello! @KimGottwald Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "theme.scss.css"
6. Add the following code at the end of the file.

 

@media only screen and (max-width: 750px){
.grid-product__meta {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
}

 

Output: 

Rishihuptech_0-1718108064131.png

 

 
If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Anshul_arora
Navigator
447 126 91

Hello @KimGottwald ,

I understand you are looking to fix the product title name in Product Listing Page.

Please add the below mentioned code at the bottom of theme.liquid file before </body> tag and save.

<style>
@media screen and (max-width:770px) {
div#ProductImageWrapper-39988210368780 {
margin-bottom: 35px;
}
}
</style>


Output -:

Anshul_arora_0-1718109079968.png

 


I hope the code helps you.

Please share if you have nay queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

BSSCommerce-B2B
Shopify Expert
551 110 133

Hi @KimGottwald , 

It seems that you have solved the problem by adding "padding: 13px 0" in the theme.scss.css

.grid-product__meta {
    padding: 13px 0;
}

 

I have checked your website, and it displays relatively well.

BSSCommerceB2B_0-1718126695755.png

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency