How to make font-size smaller in mobile view? (Only change from mobile view)

Ask the Community Customization
1
3

Hi @Shuanghao_Li :wave:

Sure, we’ll gladly help!

I’ve forwarded your request to our dev. We’ll keep you in the loop :slightly_smiling_face:

5

Hi @Shuanghao_Li,

Here is CSS code you can use to adjust font size for different widget components. Let me know if you’d like to change font size for any other elements.

@media(max-width: 550px) {
  [class*="TabsControlItem__Name"] {
    font-size: 16px; 
  }
  [class*="Info__InfoTitle"] {
    font-size: 24px;
  }
  [class*="Info__InfoCaption"] {
    font-size: 16px;
  }
  [class*="SectionsLayoutMasonry__TitleText"] {
    font-size: 22px;
  }
}
6

Hi Masha,

Thanks for the code, and yes it works. So, can you also give me the code to change the menu item font size?

Thank you

7

Sure thing! Here’s code to adjust item name and price font sizes.

@media(max-width: 550px) {
  [class*="Name__NameComponent"] {
    font-size: 14px;
  }
  [class*="Price__PriceComponent"] {
    font-size: 12px;
  }
}
}