Home Forums WoodMart support forum Mobile layout issue in Single Product Layout – Container padding not applying

Mobile layout issue in Single Product Layout – Container padding not applying

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #675916

    reneersloan
    Participant

    Hello Woodmart Support Team,

    I am experiencing a specific responsive issue while editing my Single Product Layout in Woodmart -> Layouts.

    I have been able to successfully customize the layout for the Tablet view. For example, I set the main container’s left and right padding, and it works perfectly.

    However, when I switch to the Mobile view and apply the exact same method to adjust the padding, the changes do not take effect on the live site. The content inside the container continues to stretch to the edge of the screen, ignoring the padding I have set in the Elementor editor.

    My Goal:
    My goal is simple: I want the main content on the single product page to have the same consistent left and right padding on mobile as my footer, so that everything is perfectly aligned. Currently, the footer aligns correctly, but the product content above it does not.

    We have tried various custom CSS overrides with high specificity, but they also failed to solve the issue, which suggests something in the theme’s structure is overriding the mobile layout settings.

    Request:
    Could you please investigate my Single Product Layout to see why the mobile responsive settings for container padding are not working?

    I have created a temporary admin login for you and will provide the credentials in the private content area below.

    Thank you for your help!

    #676002

    Hello,

    The issue occurs because the “Stretch Section” option is enabled for the main container in your Single Product Page Layout. When this option is active, it forces the section to stretch full width, which can override padding settings — especially on mobile.

    To fix this, I’ve edited your layout in Elementor and updated the container settings:

    Open the Single Product Layout in Elementor > Edit the main container and in the Advanced tab > Set the padding to 5px specifically for the Mobile view.

    This ensures your product content now aligns properly with the footer on mobile devices. Check back your site and check the issue. If you have any questions feel free to contact us.

    Best Regards,

Viewing 2 posts - 1 through 2 (of 2 total)