How to show full images in WL on mobile landscape?

  • Resolved wonderwooman

    (@wonderwooman)


    10 months, 2 weeks ago

    I have a section on the homepage using WL to showcase a list of featured products. I’ve configured it to display 5 images in a row on desktop. I customized the mobile breakpoint to 600px, aiming to view more images side by side in mobile landscape mode. Other sections are working well with the new breakpoint except the WL section seems to be sticking to 768px. On mobile landscape, it still shows only 1 image, and it’s a small portion of an enlarged and pixelated image.

    Additionally, I would like to adjust the number of images shown on tablet portrait mode, as it currently displays only 1 stretched image.

    What steps should I take to either adjust the breakpoint of the WL section or to ensure full images are displayed on mobile landscape mode? all image sizes are 1200×1200.

    Thanks.

    • This topic was modified 10 months, 2 weeks ago by wonderwooman.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Contributor Tarek Aziz

    (@tarekht)

    Hello @wonderwooman,

    Thank you for getting in touch with us ??

    I am sorry to hear about the inconvenience you have experienced.

    Before we look into the issue, could you please share which WooLentor widget are you using to showcase a list of featured products?

    This will help us investigate the issue better and identify its root cause.

    I look forward to your valuable response.

    Wishing you a wonderful day ahead!

    Best regards,
    On behalf of the ShopLentor Team
    Tarek Aziz

    Thread Starter wonderwooman

    (@wonderwooman)

    Thank you for your response. Probably there are more issues than I mentioned above. I use Universal product layout. I set up the breakpoint at 600px.

    5 products in a row on a desk top; https://snipboard.io/HXOd0b.jpg

    Width at 601px, WL shows 1 image and other sections changed to display 2 images side by side, https://snipboard.io/nzM5EZ.jpg

    Width at 766px, WL still displays 1 over-stretched image; I can only see 1/3 of the image on cellphone landscape. https://snipboard.io/APUjCu.jpg

    Width at 767px, WL displays 5 images (why???) https://snipboard.io/dDmOrt.jpg

    Width at 768px, WL displays 2 images, finally. :)) https://snipboard.io/xsi6gc.jpg

    I just want to to set up the breakpoint to 600px instead of 768px. I have no idea why it would display 5 images at 767px, but it happened every time.

    • This reply was modified 10 months, 1 week ago by wonderwooman.
    Plugin Contributor Tarek Aziz

    (@tarekht)

    Hi @wonderwooman,

    My pleasure. I appreciate you for clarifying the issue in such a detailed manner ??

    Aside from setting up the breakpoint for the slides, could you please try the following configuration shown in the screenshots below?

    https://tppr.me/FQPkdJ
    https://prnt.sc/ZGksXfdzM3LO
    https://prnt.sc/pqaaeSXR8-aH
    https://prnt.sc/YwHabeCewIyb

    If it doesn’t solve the issue, please create a ticket on our support website https://woolentor.com/contact/

    Our support team will definitely help you out with this.

    Wishing you a wonderful day ahead!

    Kind regards,
    Tarek Aziz

    Thread Starter wonderwooman

    (@wonderwooman)

    https://snipboard.io/BdcbfZ.jpg

    I set up breakpoints properly and the 600px breakpoint works perfectly with everything else except WL section. I use slides just to show you the issues.

    Plugin Author Zenaul Islam

    (@zenaulislam)

    Hi @wonderwooman,

    Thank you for providing clarification.

    If you have set 600 in the Elementor breakpoint settings, please ensure to adjust the Mobile Resolution to 601px in the WL: Universe Layout Slider settings.

    Your attention to this detail is appreciated.

    For guidance, please refer to the screenshot: https://ibb.co/D7cD97V

    Best regards,
    Zenaul Islam

    Thread Starter wonderwooman

    (@wonderwooman)

    Hello, thank you for your response.

    I am confused. Are we talking about the same thing? I didn’t use sliders and didn’t see any slider settings. I am using the free version of WL for display a list of products just like the store page. That’s all I used WL on my site. I used image sliders to display each image in one product but that’s nothing to do with any breakpoints.

    Plugin Contributor Tarek Aziz

    (@tarekht)

    Hello there,

    Oh! it was our bad. There must have been a misunderstanding.

    After reviewing the screenshots you shared earlier, we thought you were referring to a carousel/slider section.

    Now I completely understand which layout you are using and it appears that you want to manage the number of columns for various devices.

    I regret to inform you that the option for controlling columns based on different devices is not available in the free version of ShopLentor.

    By default, the free version showcases products within a single column on a mobile device. Hence, if you want to customize the columns, you need to write a bit of custom CSS.

    However, there is an option available in the pro version that enables users to control the number of columns based on different devices.

    I hope this helps!

    If you have any questions, feel free to reach out.

    Thank you very much!

    Thread Starter wonderwooman

    (@wonderwooman)

    I added some CSS and it works. Thank you.

    Plugin Contributor Tarek Aziz

    (@tarekht)

    Hi @wonderwooman,

    Thanks for keeping me updated on this. I am delighted to hear that you have successfully managed to resolve the issue by adding some CSS. Well done! ??

    If you need any further assistance in the future, please don’t hesitate to contact us.

    Our support team is always ready to help.

    Kindest regards,
    Tarek Aziz

    • This reply was modified 10 months ago by Tarek Aziz.
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to show full images in WL on mobile landscape?’ is closed to new replies.