Slider image display on mobile

[Max]

@Imani_Hicks Thank you for waiting!

I am really sorry, but, unfortunately, there is no way to adjust the Slider responsiveness for vertical and horizontal orientations the way you’ve shown in your example.

You can try using the CSS code below. It makes the widget fill the screen space, but the image text is getting cropped this way:

[class*='Block__BaseBlock-sc'],
[class*='MediaContainer__Container-sc'] {
  height: 100% !important;
}

Please let me know if this explains things or if you have any further questions

[Imani_Hicks]

What do you recommend

[Max]

I agree that the suggested workaround doesn’t fully meet your case, but, unfortunately, there is no other way to adjust the widget’s appearance on mobile devices for vertical and horizontal orientations. I am really sorry

We see that it would be a great enhancement and I’ve added your idea to the Wishlist. You can keep an eye on it here - Mobile responsive widget for both vertical and horizontal orientation

[Imani_Hicks]

Do yiu know how the widgets form the other websites I sent work?

[Max]

Hi @Imani_Hicks

Technically, it’s possible to adjust the appearance of the Slider widget on mobile devices for vertical and horizontal orientations, but they won’t look neat:

The main problem here is the aspect ratio of the images in your widget. In the slider on this website, most images have a height approximately 1.2 times their width, with a height difference of around 200-300 pixels on most screens.

While these images get cropped on some devices, it’s usually the height that’s cut off, which isn’t very noticeable.

However, images in your Slider widget have a width ~2 times greater than the height, so it’s impossible to resize them nicely.

Please let me know if this clarifies things or if you have any further questions

[Imani_Hicks]

Yea, I want it to look like those other sliders I sent. Do yiu know what code they used?

[Max]

Got you! If you like the way the images look in the screenshots from my previous message, you can use this code:

[class*='Block__BaseBlock-sc'],
[class*='MediaContainer__Container-sc'] {
    height: 100% !important;
    background-size: 100% 100% !important;
}

[class*='MediaImage__Container-sc'] img {
    object-fit: fill !important;
}

[Imani_Hicks]

I don;t , I lik e the way they look in the two sliders I sent you

[Max]

As I’ve mentioned in my previous message, unfortunately, it’s possible to make the images in your Slider widget look similar to the sliders on the website you’ve sent to me.

Yes, it’s possible to make them fill the screen like in your example, but the images will have poor quality in this case. This happens because of the image aspect ratio.

The height of the slider images from this website is 1.2 times greater than the width. The images get cropped a bit on the top, which isn’t quite noticeable, and the images look neat in vertical and horizontal orientation.

In your case, the image width is almost 2 times greater than the height, that’s why it’s impossible to make the images fill the screen in different orientations and keep the high resolution at the same moment.

Please let me know if this clarifies the situation or if any further questions come up

[Imani_Hicks]

Hi Max!

I found another slider

https://joja.com/

[Max]

Hi @Imani_Hicks

I am really sorry that our app didn’t work for your case, however, that’s great you could find a proper solution!

If you want to give our Slider another go or have any questions about our other Elfsight apps, just hit us up! We’ll be more than happy to help

[Imani_Hicks]

I didn’t find a new one. I’m asking if you’re able to use a similar code that this one used.

I think you’re great and I appreciate al your help!

[Max]

Ah, sorry for misunderstanding!

The thing is not in the code used for the sliders in your examples, but in the aspect ratio of the images used in your widget.

In the examples provided, most images have a height that is roughly 1.2 times their width, resulting in a height difference of 200–300 pixels on most screens.

Sometimes these images get cut off a bit on some devices, but it’s usually the bottom part that’s missing, which isn’t a big deal.

However, in your Slider widget, the images have a width that is approximately twice the height, making it impossible to resize them nicely.

Please let me know if it clarifies the situation or if you have any questtions left

[Imani_Hicks]

What image ratio should I use, I’m going to update them today

[Max]

Hi there

The image height should exceed the width a bit: 3:4, 4:5, 5:6, etc.

[Imani_Hicks]

In terms ofpixels what would that be?

[Max]

Hi @Imani_Hicks

You can use different dimensions in pixels, it’s just important to keep the required image ratio. However, here are the dimensions recommended by our devs: 960x1280; 922x1152