Slider image display on mobile

[Imani_Hicks]

My app doesn’t have that feature. The lack of responsiveness on mobile is ruining the quality of my website.

I need the responsive features.

[Max]

@Imani_Hicks The settings for adjusting the display on mobile are available only for the Slide Builder option.

I see that you are using the Image Slide option. In this case, please try to add this code to the Custom CSS field on the Advanced tab of your widget’s settings:

@media(max-width: 480px) {
  .eapp-slider-slider-slider {
    height: 350px !important;
  }
  
  [class*="BuilderBlock__StyledWidgetBackground-sc"] [class*="Background__Base-sc"] {
    background-size: contain !important;
  }
}

Let me know if it worked for you

[Imani_Hicks]

Thanks I’ll convert it

[Imani_Hicks]

Hi,

Please link the slide builder, it does mot pop up in the app search or when I try to google it. I need the slide builder link. Only the slider widget that I currently have come sup in searches.

[Max]

Slide Builder is a part of the Slider app. You can find it by clicking on Add Slide button in your widget’s settings:

Check it out and let me know if you’ve found this option

[Imani_Hicks]

Hi,

Could you please update the code that allows it to fill the screen responsively? When it’s vertical orientation, it contains it, but when it’s horizontal orientation, it fills the scree

n.

[Imani_Hicks]

So a code that allows for different fill the space so it fits for desktop

[Imani_Hicks]

[Max]

Please try to use this code instead

@media(max-width: 992px) {
  .eapp-slider-slider-slider {
    height: 450px !important;
  }
  
  [class*="BuilderBlock__StyledWidgetBackground-sc"] [class*="Background__Base-sc"] {
    background-size: contain !important;
  }
}

@media(max-width: 450px) {
  .eapp-slider-slider-slider {
    height: 300px !important;
  }
}

[Imani_Hicks]

The slide builder technique works for desktop and mobile vertical orientation, but it doesn’t work for horizontal orientation. Is there a way for you to adjust the code so the slider adjusts to fill the mobile vertical orientation screen in a way that allows the design to fit within it and the same for mobile horizontal orientation? Desktop has one orientation, but responsive UX mobile design has two orientations. I’m a certified Google UX Designer with product design experience for tech apps. II need a code that will allow true responsive design based on the orientations for mobile. The widget and the code are not responsive design

if there are not two orientation settings for mobile.

[Imani_Hicks]

That is just the slider from Th slide builder way. Vertical mobile improved but I’d love it if it coil fill the screen to the point where it can fit in it. Horizontal mobile doesn’t fill up my screen like it does on desktop and for other sites with responsive design for horizontal mobile orientation I didn’t add the code below yet.

I haven’t

added the new code yet

[Imani_Hicks]

Is there a way for you to specify horizontal and vertical

maybe add two pieces of code, one for mobile vertical orientation height and width and then one for horizontal mobile orientation height width so the code will know they are different.

I want it to fill for horizontal like it does on desktop

[Max]

I got you!

Please let me consult with the devs. I’ll get back to you tomorrow

[Imani_Hicks]

Another site with a mobile responsive widget for both vertical and horizontal orientation

https://reverielane.co/

[Max]

Many thanks for sharing your example!

I’ve sent it to the devs and will let you know once I receive a response from them

[Imani_Hicks]

Thanks,

I hope both examples can be used to make the best vertical & horizontal mobile orientations for the responsive mobile features

[Imani_Hicks]

Whats the standard timeline for that ?

[Imani_Hicks]

Hi,

I really need this fixed. It impacts my ability to do business.

[Max]

Hi @Imani_Hicks

Apologies for the delayed response!

I’ve requested an update from our devs and wiIl get back to you a bit later

[Imani_Hicks]

Thanks!