Slider Issue: Discrepancy between Elementor editor and live site

Hello WoodMart Support Team,

I hope you are well. I am currently working with your wonderful WoodMart theme and using Elementor to build my pages.

I am encountering a couple of issues with a slider on my homepage:

Editor vs. Live Site Mismatch: In the Elementor editor view, the layout of my slide content (text and buttons) is correctly spaced and looks exactly as I designed it. However, after I publish the page, the text and buttons on the live site are crammed together and appear broken or unstyled.

Full-Width Issue: I have set the slider’s section/container in Elementor to be 100% full-width. While it appears full-width in the editor, the published version does not span the full width of the screen. There seems to be some container or padding on the sides that I cannot remove.

I have already tried clearing my cache, but the problem persists. The discrepancy between the editor and the final output makes it very difficult to design the page effectively.

To help you investigate the issue, I have created a temporary login link. I will place the login details in the private content area below for you to check.

Thank you for your time and assistance.

Best regards

Attachments:

You must be logged in to view attached files.

Hi reneersloan,

Thanks for reaching to us.

I checked the slider in Editor and it looked same on the front-end https://ibb.co/m5vRrk6t

You need to increase container’s margin via Advanced tab to make it looks better.

Regards,
Hung PD

Hi Hung,

Thank you for your reply.

I appreciate you checking the page. However, the core issues I’m facing are still there, and simply adjusting the container’s margin hasn’t resolved them. The problem seems to be more complex.

I’ve investigated further and can describe the specific issues more clearly:

Editor vs. Live Site Mismatch: The discrepancy between what I see in the Elementor editor and the live front-end view remains the key problem. The layout I design in the editor is consistently different from what appears on the published site.

Responsive Background Image Issue: When I resize the browser window to be smaller, the top of the slider’s background image gets cut off, leaving an empty space above it. The image doesn’t seem to be positioning or scaling correctly.

Misalignment of Text Container with Overlay: The most critical issue is that the container holding the text on the slider uses a background overlay. This text container is failing to align with the main slider image’s position on the live site. They do not overlap correctly.

So, my main questions are:

How can I fix the editor so that what I see is what I get on the live site?

How can I position the slider’s background image so that it always sits directly below the header and scales correctly?

What is the correct method to ensure the text container (with its background overlay) perfectly overlaps and aligns with the main slider image?

The temporary login I provided is still active. Could you please take another look with these specific points in mind?

Thank you for your continued support.

Best regards

Hi reneersloan,

Please record a video that demonstrates the problem so we can understand and reproduce it on your website.

Kind Regards,
Hung PD

Hi Hung,

Thank you for your suggestion.

While I haven’t recorded a full video, I have captured an animated GIF that clearly demonstrates the issues as I resize the browser window. I have attached it to this reply.

As you can see in the animated GIF, there are two main problems:

Empty Gaps Above Header and Slider: Empty spaces appear both above the main header and above the slider’s background image. The GIF shows how the height of these gaps changes dynamically as the browser window resizes.

Background Overlay Mismatch: The background overlay on the slider’s text container does not match the slider’s background image. As the window size changes in the animation, you can see how the uncovered area of the image also changes, confirming the misalignment.

My questions remain:

How can I eliminate the empty spaces that appear above the header and the slider’s background image?

What is the correct method to make the background overlay’s size and position perfectly match the main slider’s background image at all times?

The temporary login I provided is still active if you need to inspect the setup directly.

Thank you for your help.

Best regards

Hi reneersloan,

I can’t see GIF attached file. Please use https://wetransfer.com/ to upload and share link here.

Thanks for your patience.

Regards,
Hung PD

Hi Hung,

Thank you for your reply and for suggesting a file-sharing method. My apologies that the animated GIF did not attach or display correctly on the forum.

Instead, I have taken new static screenshots at different browser widths for you to view. I hope these will be clearer in demonstrating the problems.

Here are the links to the images:

Screenshot 1 (Wide Desktop View): You can clearly see the empty gap above the header and the misalignment of the text overlay on the slider.

Screenshot 2 (Narrower View): This shows the same page on a narrower screen. You can see how both the empty gap and the overlay mismatch have changed in size but are still present.

As you can see, the main issues are the responsive gaps appearing above the layout and the text overlay not matching the slider image dimensions correctly.

The temporary login is still active for you to investigate. I hope these new images make the problem clear.

Thank you for your patience and support.

Best regards

Attachments:

You must be logged in to view attached files.

Hi Hung,

My apologies, I just realized I accidentally included my private domain name in the screenshots I provided.

Since I am unable to edit my previous post myself, could you please help me remove the image attachments/links from that reply for security reasons?

I can provide new, censored images if needed.

Thank you so much for your understanding and help.

Best regards

Hi reneersloan,

Please set background size to Cover and double check https://ibb.co/d0jsbNfm

Images attached to Private section so no one can see it.

Regards,
Hung PD

[Author]

Posts