Support Online: Mon - Fri / 08:00am - 05:00pm (GMT +7)
Your Time: Our Time:

question-circle Mobile Alignment Issue Persists + Vertical Image Size

More
1 month 4 days ago #42608 by Giacomo Marini
Hi Jackie,
I hope you're doing well.

I'm still having trouble with the JUX Before After effect and would really appreciate your help.
My site is running Joomla 5.2.4 Stable and PHP 8.2.27.

This week, I've realized I have two issues, but the main one is with the size of vertical images:

Vertical Image Size: Vertical images are displayed too large.
I've tried uploading smaller images, but the problem persists.
At 100% size, they are much larger than their original dimensions.
Even if I scale them down, their display size is still larger than their scaled dimensions.
I believe this is the core issue, as it's what led me to try scaling the images in the first place.

Mobile Alignment: To keep the effect centered on mobile (as you suggested), the image needs to be at 100%.
However, scaling it down on desktop (because of the vertical image size issue) causes misalignment on mobile.
I've tried your CSS code and other fixes to scale on desktop while keeping it at 100% and centered on mobile, but nothing has worked.

Could you please help me primarily with:
- Displaying vertical images at their intended size.
And then secondarily:
- Keeping the effect centered on mobile when the image is scaled on desktop (if scaling is still needed after the first issue is resolved).

Thank you for your patience and support!
Giacomo

Please Log in or Create an account to join the conversation.

More
1 month 1 day ago #42610 by Giacomo Marini
Hi,
do you have any feedback?

thanks
Giacomo

Please Log in or Create an account to join the conversation.

More
1 month 16 hours ago #42613 by Jackie
Hi.
We have the config width for the before after image, you can add the width as you want.
If you want to center the before after when change the width, you can use the custom CSS below:

.jux-img-comparison-wrapper {
margin: 0 auto;
}

If you want the full-width on the mobile, when change the width, you can use the custom CSS below:

@media (max-width: 991px) {
.jux-img-comparison-wrapper {
width: 100% !important;
}
}

Please recheck it.

Regards.

Best regards.
Jackie Nguyen.

Please Log in or Create an account to join the conversation.

Moderators: Jackie
Time to create page: 0.059 seconds
Powered by Kunena Forum