How can I increase font size on mobile for Sense theme?

hey, my website looks very small on mobile in sense theme

i would like to get it bigger fonts and everything and annoncemnt bar and title also

hopefully somebody can help me please :slightly_smiling_face:

Site: iEthosa.com

Hey there,

The below code may be helpful - it will affect most of the elements at once.

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
  font-size: 24px !important;
}
p {
  font-size: 20px !important;
}

Adding the code at the end of your base.css file should reflect the changes as in the following screenshot:

Cheers!

Hello @raya2

Add below the code in base.css file

@media only screen and (max-width: 768px) {

h1, h2, h3, h4, h5 {

font-size: 24px !important;

}

p {

font-size: 22px !important;

}

}

thank you,

now i changed it and i have another 2 problems

  1. the announecment bar is a little too big

  2. the “Shine Everywhere” is too small

how do i change that also? thanks :slightly_smiling_face:

Hi,

You can use the following CSS code:

p.announcement-bar__message.h5 {
  font-size: 20px !important;
}
h2.image-with-text__heading.h1 {
  font-size: 36px !important;
}

Adjust the values as you please.

Cheers!

works fine perfect!

and how do i change the menu font on the mobile ? when i click on the menu 3 lines on the upper left corner the menu is very small

the probelm was: once i changed the font it changed also to very big on computer ..

how can i fix only on mobile ?

the probelm was: once i changed the font it changed also to very big on computer ..

how can i fix only on mobile ? ?

Hi,

You can use the following code to apply the changes only on mobile phones:

@media (max-width:768px) {
p.announcement-bar__message.h5 {
  font-size: 20px !important;
}
h2.image-with-text__heading.h1 {
  font-size: 36px !important;
}
}

Cheers!

somehow it doesn’t work, i pasted it on base.css is that correct ?