Slider Content Alignment & Image Overflow Issue

Hello,

I’m facing two issues with the sliders on my website:

All the content inside the slides (text, buttons, and images) is aligned too much to the right side instead of being centered.

On the last slider, the attached image stretches/overflows downward more than expected.

I already tried setting the container to Full Width, changing alignment (Center, Justify Content, Align Items), and checking padding/margin, but the problems still persist.

Can you please help me fix this so that the slider content is properly centered and the last slide’s image displays correctly?

Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

01. For the slide content alignment, you can adjust it directly in the slide settings. Edit the slide > scroll down to the Layout area > under Content position, set both Vertical content align and Horizontal content align to Center.
https://postimg.cc/w1Z94NtR

02. Regarding the last slide image, the issue comes from the image size/height. Please try changing the Background position in the slide settings and check how it works.
https://postimg.cc/QB7h2M54

Best Regards,

Hello,

I already tried the steps you suggested (setting both Vertical & Horizontal content align to Center). The last slide issue with the image height was fixed, but the main problem is still there.

It seems the issue is not inside the slider itself, because in the Elementor preview the slides are perfectly centered. The problem only happens on the live site.

Since my site is in Arabic (RTL), the theme forces me to use right-to-left alignment from the theme settings, and this causes the slider content to shift to the right instead of staying centered.

Could you please advise how to keep the slides centered on the live site while still using RTL layout?

Best regards,

Also in phone can’t reduce gap between text and image in 1st slider

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

There is info that u asked for

I also need ur help with the slider images on my website:
Many slider images lack width/height attributes, which is causing CLS issues.
The first slider image is flagged as the LCP problem → it should have proper dimensions, not be lazy-loaded, and load with fetchpriority=”high”.
Since you’ll already be adjusting the sliders, could you please fix these points directly so the images are optimized and PageSpeed on mobile improves?

Hello,

01. I have edited slide 1 and changed the content position to center, and it is changing fine.
See Screenshot for clarification: https://postimg.cc/cgLVbFXp

Check back your site after completely clearing the browser cache and check the alignment.

02. LCP(Largest Contentful Paint) message indicates which element is the Largest Contentful Paint. Usually, such optimization is automatically performed by cache plugins, for example, WP Rocket.

Read more here: https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/?utm_source=lighthouse&utm_medium=lr

First, you need to optimize the site in general – https://xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021/

Best Regards,

Still not working in main page

I made new sliders in place of base sliders, and it worked … also deleted any Xteamos Extra settings in Elementor sliders to see what I’m doing in Elementor edit place and better performance … But somehow, best sellers sliders don’t wanna appear anymore

Hello,

But now I have checked your site and the best seller slider is showing fine on your site.

See Screenshot for clarification: https://postimg.cc/fSfWRf7w

Check back your site after completely clearing the browser and check the issue.

Best Regards,

Yes, cuz of LiteSpeed cache sliders got appearing problem, but I handled it … Thanks for the help, now I just wanna first slider image is flagged as the LCP problem → it should have proper dimensions, not be lazy-loaded, and load with fetchpriority=”high”.

Also, when I swipe from left to right on mobile, the slider text breaks and overlaps, as shown in the screenshot. This issue only happens with the slider named “Missing IC or any tools ?”. I set this slider to draft temporarily because I couldn’t identify the cause.

Attachments:

You must be logged in to view attached files.

Hello,

01. Please check the LCP issue now in the page speed.
https://postimg.cc/HVzdk7Jt

Follow this fix steps:
https://elementor.com/help/image-loading-optimization/

02. I have visited your site and updated the slide and see that it is showing fine.
See Screenshot for clarification: https://postimg.cc/fJckjLV3

Check back your site after completely clearing the browser cache and check the issue.

Best Regards,

01. Got it, thanks
02. Did you swipe sliders … cuz it same problem

Attachments:

You must be logged in to view attached files.

ugh it happened also in pc when sliding from left to right

Attachments:

You must be logged in to view attached files.

Hello,

When I try to log in, it asks for the verification code. Please disable the Jetpack plugin for a while so I can access the site and check the issue.

Best Regards.

Done

Hello,

Please check it now. I have removed all the cache from the cache plugins, and now the slider is working fine on mobile and desktop as well. Please check the site now after removing the browser cache.

If you are still seeing the issue, please share a small video.

Best Regards.

Problem solved … but the slider is very slow in loading on mobile … I need a solution for it

Hello,

WoodMart theme is optimized for speed and should not significantly slow down your website. However, it’s possible that your website’s performance is affected by the content you have added.

For instance, the use of too many plugins, large unoptimized images, or other resources can slow down your website.

I recommend that you remove any unnecessary plugins and install a JS & CSS optimization plugin such as WP Rocket. Our guide on how to optimize your website using our themes can be found here: https://xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021/

Best Regards,

[Author]

Posts