How to reduce the font size of the tabs on mobile

Ask the Community Customization
1

Hi @Max I’m having issues with the Menu headers fitting on mobile. Can you help, please? It would be nice if the Sections (speaker names) were smaller on mobile too, please.

Screenshot 2025-07-09 at 9.48.14 AM
Screenshot 2025-07-09 at 9.48.14 AM814×1382 77.1 KB

2 Likes
3

Hi there, @OHS_Graphics :waving_hand:

Sure, here is the code:

@media (max-width: 500px) { 
[class*="TabsControlItem__Name-sc"] {
  font-size: 15px;
}
}

Please add it to the Custom CSS field on the Style tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

1 Like
4

Thank you!! May I get code to make the Sections (speaker names) were smaller on mobile too, please?

2 Likes
5

Oh, sorry for missing that! This code will do the trick :slightly_smiling_face:

@media (max-width: 500px) { 
[class*="SectionsControlItem__SectionsControlItemComponent"] {
  font-size: 15px;
}
}
1 Like
6

Thank you so much!! I really appreciate your help, responsiveness, and speed! :grinning_face_with_smiling_eyes:

3 Likes
7

You’re always welcome and thank you so much for your kind words :heart:

In the meantime, we’d like to invite you to participate in our Birthday Contest, where you can win a 12-month extension for your subscription - Birthday Contest: 10 Winners, 10 Free Years with Elfsight! :wrapped_gift:

Check the details and join in :wink:

1 Like