Change slide heights between mobile and desktop images

I followed this tutorial below but the main issue is that my desktop images and mobile images have different sizes. I have adapt to first image in place but that causes issues with the mobile render. I was wondering if it is possible to bypass this or have a separate .css or .liquid file for device optimization.

https://www.youtube.com/watch?v=RYm1adxvIwE&t=185s

https://letsdebugcode.grtrading.in/blogs/news/change-banner-according-desktop-and-mobile-devices

This is Noah from PageFly - Shopify Page Builder App

Hi, Basically, to display full slides or images, there needs to be a balance between width and height. You can send the website url link and I will check the elements and fix it for you.

Best regards,

Noah | PageFly

I removed the mobile images from the website. Should I add them back so you can review? The desktop images for the slideshow are 4950x1238 and the mobile images are 2700x4800. The aspect ratios are completely different so I’d like to know what can be put in the slideshow.liquid to fix this.

Here is the website with the mobile images added back.

https://lifefirstnutrition.com/

@lfn888 you cand add code this in slideshow.liquid to fix it.


Thank you!

1 Like