CSS for Changing font size on Mobile

Ask the Community Customization
1

Hi,

I see you can change the font-size of the content for desktop. I would love the CSS to change for mobile please?! Would like font size for any of the text options. Badge, content, and be able to adjust the content contering on from top to bottom on mobile.

Thank you!

2 Likes
3

Hi @Shawn_Martin :wave:

Could you please specify the name of the Slider widget where you’d like to make these changes?

1 Like
4

Name as in what my slider name is? The name of the slider widget is “SHOUTOUT”. Would also like to change the color of the link text so its not only blue.

Also, the padding seems a bit tight horizontally & vertically on mobile. Would like to be able to flex out the text a bit.

The timing of the pagination seems off, is that preset? It seems like it’s changing every 5 seconds but the timer looks like it should be 10? Anyway to speed up the pagination timer?

2 Likes
5
  1. Here is the code to change the font size on mobile:
@media (max-width: 500px) {

.eapp-slider-badge-component {
  font-size: 10px;
}

.eapp-slider-title-component {
font-size: 10px; 
}

.eapp-slider-text-component {
  font-size: 10px; 
}
}
  1. The Auto Slide option works correctly. The delay is set to 5 secs, and it takes 5 seconds to switch the slide. If you’d like to change this value, you can do this in the Auto Slide section on the Settings tab:

image
image324Ă—588 12 KB
image
image330Ă—356 8.54 KB

  1. I’ve asked the devs to share the codes for changing the link color and padding in mobile. I’ll update you tomorrow

Additionally, I’d like to note that the Slide Builder type of slides has more flexible settings (including separate features to adjust the appearance of the slide element on mobile). Feel free to check it out :slightly_smiling_face:

image
image320Ă—375 13 KB

1 Like
6

Hi there, @Shawn_Martin :wave:

  1. This code will help you change the link color:
/* Link color */
.eapp-slider-slide-slide a {
  color: blue; 
}

/* Link color on hover */
.eapp-slider-slide-slide a:hover {
  color: red !important;
}

/* Link color when clicked */
.eapp-slider-slide-slide a:active {
  color: orange !important;
}

/* Link color once visited */
.eapp-slider-slide-slide a:visited {
  color: violet;
}
  1. Here is the code to adjust padding on mobile (it should be place inside the media tag:
.eapp-slider-slide-component {
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-top: 0px;
  padding-bottom: 0px;
}

.eapp-slider-slide-elements {
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-top: 0px;
  padding-bottom: 0px;
}

image
image380Ă—369 19.3 KB

Also, the slide content has a restricted width (80%). You can change it using this code:

.eapp-slider-slide-inner {
  width: 100% !important;
}
1 Like