Slider content shifted on frontend

Hello,

I’m using the WoodMart Grocery prebuilt website.

Without making any changes, the content inside all sliders suddenly appears shifted to the left on the frontend.

In the Elementor editor, everything is perfectly centered and looks correct. The issue only appears on the live website.

Could you please check what may be causing this?

Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you for contacting WoodMart Support. We’ll be happy to assist you with your request.

Before we continue, we have one quick question for you:

Where did you first hear about WoodMart?

We really appreciate your help with this. It takes just one click, but your answer is extremely valuable to us and helps us understand how customers discover WoodMart:
https://tally.so/r/rj8qWl

Now, let’s get back to your request. Please check back your site and check the slide content.

See Screenshot for clarification:https://postimg.cc/0rmfXNMv

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

Best Regards

sorry but the we still have the same problem. Please watch my video to see the problem: https://www.loom.com/share/c310021d30e04e2a86078dc028b240dd

Hello,

Thank you for the video.

We have checked the issue and found that the site is currently using a Custom site width of 1500px under Theme Settings > General.

When the site width is set to Full width, the slider content is correctly centered on the frontend.

Please check the Theme Settings > General > Site width option and set it to Full width then the slide will show in center like the demo.
https://postimg.cc/CBsRkZFk

Please let us know if you have any further questions.

Best Regards

Hello,

Thank you for your help.

I have changed Theme Settings > General > Site Width to Full Width, and this fixes the slider alignment issue.

However, now the rest of the website content has too much margin on the left and right.

I would like to keep the slider working correctly and centered, but make the rest of the page content wider, around 1500px, without affecting the slider.

I have tried changing the Elementor Site Settings > Layout > Content Width, but it doesn’t seem to have any effect.

Could you please tell me the correct WoodMart setting to increase the content width while keeping Site Width = Full Width and without affecting the slider?

Thank you!

Hello,

If you want the other Elementor content to be wider, you should control the width at the Elementor container level rather than changing the WoodMart Site Width back to 1500px.
Please try the following:

1. Edit the required page with Elementor.
2. Select the main container that contains your page content.
3. Go to Layout and adjust the Content Width / Width according to your requirements.
4. If you want a specific section to extend to the edges of the screen, open the XTemos Layout settings for that container and enable Stretch Container.
https://ibb.co/s1DYvJ4

Please note that Stretch Container should only be enabled for the sections that you want to make full-width. It is not necessary to enable it for the entire page.

In your case, I recommend keeping:
Theme Settings > General > Site Width > Full Width and then controlling the width of the individual Elementor containers. This will allow the WoodMart slider to remain correctly centered while giving you more control over the width of the remaining page content. Also, You can set the padding to 0 for that container to compensate for the gap from left and right.

Best Regards.

[Author]

Posts