I recently installed the WPML plugin and translated the products into Arabic. The layout and design appear fine on the desktop version, and everything looks good. However, I’m facing an issue on mobile devices where the product images are not displaying correctly.
Please note that I added the following code to fix the single product page layout, and this code was provided by your support team, not by me:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
I hope you’re doing well.
I recently installed the WPML plugin and translated the products into Arabic. The layout and design appear fine on the desktop version, and everything looks good. However, I’m facing an issue on mobile devices where the product images are not displaying correctly.
Please note that I added the following code to fix the single product page layout, and this code was provided by your support team, not by me:
@media only screen and (min-width: 1000px) { .rtl.single-product .row > .product[data-gallery-style] .single-product-main-image, .rtl.single-product .product[data-gallery-style] .single-product-main-image { margin-left: 5% !important; margin-right: 0 !important; } }While this code worked well for the desktop version, the issue still persists on mobile, where the product image alignment is not correct.
Could you please advise on how to resolve this issue for mobile devices?
Thank you for your time and support. I look forward to your guidance.
Attached files: image (26).png
Hi Shrouk,
Thank you for getting back to us.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 999px) { .rtl .single-product-main-image.col { margin-left: unset; margin-left: unset; left: 0; margin-right: -50vw; margin-right: calc(-50vw + var(--scroll-bar-w) / 2); right: 50%; } }Try that and let us know how it goes.
Thanks