Cant get full width like I had in my previus themes

I have problem with making the page full width. I want to get background color/image that goes to each side of the website but the content stays in 1200 px for example. This was no issue with last themes I have used in elementor, but I cant seem to get how I do this in woodmart. Now in woodmart the background color and everything stops at 1200 px.

New website is curli.no. For comparison you can see that I have full width background color on curlin.se

Attachments:

You must be logged in to view attached files.

Hello,

Since by default, all page content, including content created using Elementor, is within this overall wrapper, it will always be limited to 1222px (or another width selected in the theme settings), regardless of what is chosen in Elementor’s “Content Width” option
(https://monosnap.com/file/57fEW87J1DCMRENoqezbx93iiQaawe).

In this case, the maximum Full Width value will always be the width of the site wrapper (container), not the screen width. To stretch Elementor widgets beyond the site’s general wrapper to the screen’s edges, you need to use our theme’s special “Container stretch” option
(https://monosnap.com/file/fybksUs0Aj4abtjWE5wPJ7P3TJrRyi).

Additionally, you can combine these options by stretching sections using “Container stretch” while also fine-tuning the content width with Elementor’s “Container width” option, as shown in this video (https://monosnap.com/file/ijOPrWEsX2Rpkuonw5H2T9dW4HbBXs).

Alternatively, if this content structure principle doesn’t suit you, you can switch to the standard content structure used by the Elementor plugin. To do this, you need to disable the “Elementor sections negative margin” option in the theme settings (https://monosnap.com/file/6Ltrz2iHcwcK4oayDMEFmqSQg1V0Af) and activate the “Elementor Full Width” template in the page settings
(https://monosnap.com/file/1iqETL7CFZhU8S1eiTbO6HL8kqAPia).

After that, the 1222px site wrapper (container) that wraps the Elementor content will disappear, and the maximum width of each section will need to be adjusted separately using the “Content Width” option, as is standard in Elementor (https://monosnap.com/file/KmYzESFRLRCSt6TfpXqr8uTlze4nXS). It’s important to note that if you use the “Elementor Full Width” template, the theme’s “Container stretch” option does not need to be used, as the site wrapper (container) does not exist on this template, and all Elementor widgets are already stretched to full screen by default.

In summary:

If you are using the “Default” page template:
– All widgets are limited by the site’s overall wrapper width (1222px).
– You can stretch them beyond the wrapper (to the screen edges) only using the theme’s “Container stretch” option.
– The “Content Width” options (boxed and full width) can only be used if you need to set the content width narrower than the site’s overall wrapper (1222px).
If you are using the “Elementor Full Width” page template:
– The general wrapper does not exist, and all Elementor widgets are already stretched to full width by default.
– The content width for each section must be adjusted using Elementor’s “Content Width” options (boxed and full width).
– The theme’s “Container stretch” options are not necessary.

Best Regards,

Thank you so much! Is it perhaps container stretch that is the preffered option or is the elementor option favourable in some instances?

And is it a way to put the xtemos container stretch as default? BEcause if I understand correctly we have to change this every time we make a new elementor element?

Problem solved. We want this to be on the whole page so it was much easier to disable the whole thing and make it elementor full width.

Also another question. How do I remove the universal top and bottom margin on the website?

Attachments:

You must be logged in to view attached files.

Hello,

You can find the option in the Advanced tab for Elementor to remove the white space:

Please follow this guide: https://xtemos.com/docs-topic/top-and-bottom-paddings/

If you have any questions, feel free to contact us.

Best Regards,

Thank you! The problem Im now facing when Im enabling elementor negative margin is that there is no margin on the sides when the pages are under 1200 px. With our last theme we could easily have automatic elementor full width and still have 10 px margin on left and right side. Is the only way to fix this to do changes of the elementor container itself or is there another way to fix this?

Attachments:

You must be logged in to view attached files.

Hello,

Regarding the side margins, when using the Elementor Full Width template with negative margins disabled, Elementor will stretch the content fully without adding padding To achieve a consistent 10px margin on both sides under 1200px, you have two options:

Add responsive padding directly to your Elementor containers in the advanced tab. This allows you to control margins.

Best Regards,

Hi! You said there was to options but it seems like you only gave me 1. Also the problem with having margin on the container itself is that when I have a big screen on pc the page will be 1200px – 20px because of the margins but I guess I then have to change elementor page width to 1220 px for example to match the 1200 woodmart width right? Or is there some other smart solution here?

Hello,

Try to add side padding only on mobile. This way, your design remains exactly 1200px wide on desktops but automatically adds margins on mobile screens. This approach keeps the desktop design pixel-perfect and still responsive on mobile.

Best Regards,

But this is still a problem because I need margins on PC also. See photo attached. This is how my page looks like now on narrow PC screen.

Also the “only changing margins on phone” wont make it easier because I would still need to go into every container in elementor and change margins on phone right? And then it would take just as much time just doing it on the PC screen because mobile would automatically follow the PC margins.

Attachments:

You must be logged in to view attached files.

Hello,

If you also need margins on desktop screens, then instead of adding padding only for mobile, you can set a global container width and apply side margins using Elementor’s container settings.

To make it even easier, you can adjust this globally in Elementor Site Settings -> Layout -> Content Width + Padding. That way, margins will automatically apply across all pages, and you won’t need to edit each container separately. https://elementor.com/help/site-settings/

Best Regards,

Yes thank you. I guess I have to do it that way. Where do I change the woodmart margins though? Because my product archive page and header is still woodmart. I want them to be identical with the elementor margins I make.

Attachments:

You must be logged in to view attached files.

Hello,

The margins and container width are managed through the theme settings.

You can adjust them under:

Dashboard > WoodMart > Theme Settings > General Layout > Site Width.

Best Regards,

[Author]

Posts