[Mobile View] How to Make Specific Sections Full Width Only on Mobile While Keep

Hi,

I’m using the WoodMart theme along with Elementor to build my pages. On the mobile version of my site, I noticed that there’s approximately 30px of white space on both sides of the screen, which prevents the content from stretching to full width.

In the Theme Settings > General > Layout > Site Width, I’ve selected “Full Width”, but it doesn’t seem to affect the mobile spacing.

I also tried enabling “Stretch container” under Xtemos Layout inside an Elementor Container. While this does make the content full-width, it also applies to desktop, which is not what I want.

What I really want to achieve is:

Make some sections display full width only on mobile,

While keeping them center-aligned and boxed on desktop,
To maintain a visually consistent layout.

Alternatively, if full-width isn’t possible, is there a way to reduce the default ~30px padding on mobile down to 10px or less?

How can I achieve this behavior?
Appreciate your help — thank you!

Attachments:

You must be logged in to view attached files.

Hello,

To achieve a full-width layout on mobile while keeping the content boxed on desktop, please follow these steps:

1. Edit the Container in Elementor

In the section you want to adjust, go to the Xtemos Layout panel and enable “Stretch Container and Content”. This will allow the section to span the full width.

2. Adjust Global Container Padding

Navigate to Elementor > Site Settings > Layout.
Under “Container Padding”, set the padding to 0 for mobile devices –

For desktop, you can set the desired padding (e.g., 30px or any value you prefer) to maintain the boxed appearance. https://take.ms/AoEaU

See Screenshots for better understanding: https://ibb.co/9HcQnSJW, https://ibb.co/gF7fgy4Q

Best Regards,

[Author]

Posts