Change padding for single product page on mobile pages

Hello @martijntje,

Thank you for reaching out to us.

Yes, it is possible to adjust the padding of the content on the single product page specifically for the mobile version. You can achieve this by adding custom CSS to your site. For example:

@media only screen and (max-width: 767px) {
    .single-product .content-page{
        padding-left: 20px;
        padding-right: 20px;
    }
}

Please make sure to add this code to your child theme’s style.css file or in the Customizer under Appearance > Customize > Additional CSS.

If it doesn’t work, please provide us with your single product page URL.

Best Regards,
8Theme’s Team

Hi @martijntje,

Please update the previous CSS code to this:

@media only screen and (max-width: 767px) {
    .single-product .content-page,
    body.single-product .page-heading{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

Hope it helps!

Dear @martijntje,

We would like to suggest separating the following custom CSS code for better organization and clarity:

@media only screen and (max-width: 767px) {
    .single-product .content-page {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    body.single-product .page-heading {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

Please let us know how it works for you.

Best regards,
The 8Theme Team

Dear @martijntje,

You are most welcome!

Best regards,
The 8Theme Team