Enlarge gap between Product picture and title on Mobile?

[KimGottwald]

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

[Huptech-Web]

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:

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.

[Anshul_arora]

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 tag and save.

Output -:

I hope the code helps you.

Please share if you have nay queries.

Thank you.

[BSSCommerce-B2B]

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.