Change Slider Font Size in Tablet and Smartphone view

Hello Support,

I am using the following code for the desktop view:

@media (min-width: 1200px) {
.text-slider .maintitle {
font-size: 50px;
}
}

@media (min-width: 1200px) {
.text-slider .subtitle {
font-size: 50px;
}
}

Will you please provide me the code for both the tablet and smartphone views too?

Thanks, Bo

Hi,

Add these code before your code:

./* default for mobile screen */
  .text-slider .maintitle {
    font-size: 20px;
  }
  .text-slider .subtitle {
    font-size: 20px;
  }

/* tablet screen */
@media (min-width: 768px) {
  .text-slider .maintitle {
    font-size: 30px;
  }
  .text-slider .subtitle {
    font-size: 30px;
  }
}

/* bigger tablet screen */
@media (min-width: 992px) {
  .text-slider .maintitle {
    font-size: 40px;
  }
  .text-slider .subtitle {
    font-size: 40px;
  }
}

Regards,
Awan

1 Like

Thanks Awan.

It’s rather strange, when I entered the mobile code, I can adjust the font size for the smartphone view. However, it somehow overrides the desktop view by reducing the font size and no longer enabling me to adjust the font size for the desktop.

Also, neither of the tablet screen or bigger take screen coding is working.

What do you suggest?

Thanks for your help. Bo

Hi, I set all the font-size in above randomly. Have you try to adjust the font-size value for each screen size?

Yes, I did. And I flushed the cache.

I have both the mobile screen and the desktop screen working now. What’s not working are the tablet screen and the bigger tablet screen. When I adjust those numbers, nothing changes.

Thanks, Bo

Hi,

Sorry for the delay.
I’ve just checked your site and looks like it displayed well. Checked the tablet screen too, and I can see the code is working.