Slider CSS Customizations For Mobile

Ask the Community Customization
1

Hiya @Max and @Helga!

Hoping to get some more help with customizations with the slider for mobile. Right now I am dealing with a big narrowing of my font on the slider when on mobile. Is there a way to maybe move the arrows down so they are not on the sides, widen the box for text, and maybe even shrink down the button on mobile? I absolutely love this widget on desktop, but my design on mobile looks strange.

I would appreciate any help to make this look right!

Mission Statement Slider is the name of my slider that I am having issues with.

1 Like
2

Hi @Quilla :wave:t2:

We’ll look into this for you, I’ll get back with the solution (hopefully!) a bit later :blush:

3

@Quilla can you please try to add the following CSS code to your widget’s Custom CSS code field:

@media screen and (max-width: 500px) {
  .eapp-slider-slide-elements {
    padding: 0;
  }
  .eapp-slider-slide-component {
    padding-top: 0;
  }
  .eapp-slider-media-container {
    padding-top: 60px;
  }
  .eapp-slider-slide-component {
    padding: 0;
  }
  .eapp-slider-arrow-component {
    left: 0;
    right: 0;
  }
  .eapp-slider-navigation-arrow {
    padding: 0;
    width: 44px;
  }
}

Let me know if it worked! :blush:

5

Hiya @Helga! thank you so much for this! worked like a charm! :slight_smile: Do you have any advice for the button and the images showing up and how to make it look a bit better towards the bottom?

1 Like
6

Hi @Quilla :wave:

Please let me step in for Helga.

Could you please specify what exactly you’d like to change in the appearance of the button and images? Do you want to place buttons a bit higher, so that they wouldn’t overlay images?

7

Hiya @Max! I am trying to figure that out myself since it looks so vastly different from the desk top version. Maybe there is a way to flip the copy and the button or even move the image up a bit so it doesn’t feel so tucked into the bottom? I just feel like it looks a little bit odd! Maybe also make the button smaller so it’s smoother? Let me know what you think! :slight_smile:

1 Like
8

Hi @Quilla :wave:

I’ve tried to customize the mobile appearance of your slider and here is the result I can suggest (just need to move the button a bit higher).

I just moved the image to the top and change the slider height to prevent image cropping.

image
image436×949 89.5 KB


If you like how it looks, please let me know and I’ll ask the devs to provide a CSS to move the button :slightly_smiling_face:

9

@Max Yesss this is perfect! thank you! it already looks so much better! if we could just have some space between the pagination and button and maybe even make the button smaller, that would be PERFECT! :slight_smile: you guys are amazing!

2 Likes
10

Got it! Here is the adjusted the solution we’ve added to your widget:

@media (max-width: 500px) {
.eapp-slider-slide-inner {
flex-direction: column-reverse;
}
}
@media (max-width: 500px) {
.global-styles, .eapp-slider-slider-slider {
height: 92vh!important;
}
}

@media (max-width: 500px) {
  .eapp-slider-slide-elements {
    bottom: 20px !important;
  }
}

Check it out and let me know if you like the result :wink: