Top padding for Single Product Page not working on mobile

Hi. I’m having trouble finding a solution to make my Single Product Page look as I want on mobile. It looks good on desktop.

Top padding on mobile seems that is not working, the product picture is very close to the header to the point that a little part is cropped. I would like to have a nice padding in mobile as I have it on desktop so could be some nice space between header and the single page product information.

I’ve attached pictures to make it clearer.

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.single-product .main-page-wrapper {
margin-top: 0;
}

Best Regards

Great, it worked just fine!

Would you recommend me to move my additional custom CSS to ‘Global CSS’ in Theme Settings or to keep it there (attached picture)?

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

We are glad that your issue has been resolved.

Yes, we always Recommend to use the Theme Settings Custom CSS fields to add additional CSS.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts