Font Size WAYYYYY too Small on Mobile Devices

[gabzarts101010]

Hi there!

My website is onegearatatime.com 

I went on my website yesterday and noticed the mobile font was super small. Out of nowhere. The day before it was still the normal size and now it's too small and I can't put it any bigger. 

So I said to myself "make the font bigger on Themes -> Change Fonts -> Paragraph text -> Size"!

But no.

However, it does change the font on the desktop view. Still not on the mobile version. 

So after a few hours of trying to edit the css/html code I though maybe I could directly change the font from the editior on my phone. So I changed the font in order to make it bigger. Nothing. However, I can change spacing, height and weight and it does change on the mobile version. But not the font-size.<

Here are some screenshots.

http://onegearatatime.weebly.com/reviews/changing-fonts

Please help. PLEASE!! Thank you very much in advance!

- Gabriel

[gabzarts101010 · Accepted solution]

Hi guys! I found a way to fix it!!! I bit more complicated than I thought, but hey, it worked after all!!

***Please note that Weebly did not reply to my email yet, I found a way to fix it on my own***

Try it at your own risks.

Here are the steps to complete it.

1. Go to your site

2. Theme

3. Edit HTML/CSS

4. Scroll down on the left menu. Then you'll find a folder named "ASSETS". Click on it to make sure it opens. 

5. Open file called "main_style.css"

6. Scroll down until you find this:

p, .paragraph {
  font-size: 1em;
	line-height: 1.5;
	margin: 0 auto 1.6em;

7. change it for this

p, .paragraph {
  font-size: 12pt /*1em*/ !important;
	line-height: 1.5;
	margin: 0 auto 1.6em;

Why? ok, first you want to change the font size, right? it seems "1em" is too small, right? So you'll put 1em aside, more specifically under a comment by adding this /* */. a comment is always displayed between /* and */, its a general coding rule. I've also added "!important" at the end of the code, I'm not a specialist but I've seen this code around a lot in the "main_style.css" file so I though it could be important (no bad jokes here)

Second, you want to put 12pt, and see how big the font is now. You got that right, if it's still too small, but 13, 14... you got that. However, it seems like adding this part of code enabled the theme editor to work. So basically with this exact code, I managed to make the font bigger directly from the "change font" tab. Play around with it a little bit and you'll figure something out sometime!!

It worked for me... Don't know how it got changed... But it worked.

If you need any help, I'll be pleased to guide you a little bit, reply to this thread or email me at [email protected]

- Gabriel from onegearatatime.com

[ChewbaccaDad]

I am suddenly have the same problem with my Weebly site.  No changes to font size by me, but fonts on my site are now smaller when viewed on a mobile device.  

Weebly, you guys must have changed something.  Fix it please!

[Queso]

Hello! Our apologies for the stress! Can you get in touch with support over at hc.weebly.com? They should be able to go through a few tests with you to narrow down the issue.

[gabzarts101010]

I just did that, hope they'll fix the issue because it seems I'm not the only one experiencing this issue

[AngelXAces]

it's not just on mobile. I was on my laptop last night and there was a massive delay between adjustments and results and often meant refreshing and doing it again.

[Adam7]

Can you try temporarily switching back to a standard theme and re-publishing, @AngelXAces?

[AngelXAces]

The problem for me stopped. I just figured your server was in need of restarts or something. Thanks though.

[gabzarts101010]

Hi Adam,

That's exactly what I just did, I chose a theme that looked almost like the one I had, republished the website, and same issue, fonts are still small. However, the colors will change but not the size. Ironically the font type also changes (eg. arial vs times new roman)

I got in touch with the Weebly HC (sent them an email) and let's hope for the best.

- Gabriel 

[Luiro]

Hi, this happens to me also. The fix I found is while editing the post if you enlarge the text with the +/- it will show up on mobile. The bad part is you will have to do each post individually.

[gabzarts101010]

I tried it and unfortunatly it only worked on the desktop version. It's still super small on mobile

But thanks!

I'll try to contact the Weebly team an I'll put the answer that will work for me (if it'll ever work, I'm getting desperate!)

- Gabriel 

[Wavey1]

I added icons yesterday for the first time.  Sizing for desktop went well, however, the icons are WAYYY too BIG on my Android... opposite issue described in this trail.

[Adam7]

---

@Wavey wrote:

I added icons yesterday for the first time.  Sizing for desktop went well, however, the icons are WAYYY too BIG on my Android... opposite issue described in this trail.

---

That might be by design so they aren't super tiny on a mobile device, though I'd have to see the page where you added it to know for sure.

[gabzarts101010 · Accepted solution]

Hi guys! I found a way to fix it!!! I bit more complicated than I thought, but hey, it worked after all!!

***Please note that Weebly did not reply to my email yet, I found a way to fix it on my own***

Try it at your own risks.

Here are the steps to complete it.

1. Go to your site

2. Theme

3. Edit HTML/CSS

4. Scroll down on the left menu. Then you'll find a folder named "ASSETS". Click on it to make sure it opens. 

5. Open file called "main_style.css"

6. Scroll down until you find this:

p, .paragraph {
  font-size: 1em;
	line-height: 1.5;
	margin: 0 auto 1.6em;

7. change it for this

p, .paragraph {
  font-size: 12pt /*1em*/ !important;
	line-height: 1.5;
	margin: 0 auto 1.6em;

Why? ok, first you want to change the font size, right? it seems "1em" is too small, right? So you'll put 1em aside, more specifically under a comment by adding this /* */. a comment is always displayed between /* and */, its a general coding rule. I've also added "!important" at the end of the code, I'm not a specialist but I've seen this code around a lot in the "main_style.css" file so I though it could be important (no bad jokes here)

Second, you want to put 12pt, and see how big the font is now. You got that right, if it's still too small, but 13, 14... you got that. However, it seems like adding this part of code enabled the theme editor to work. So basically with this exact code, I managed to make the font bigger directly from the "change font" tab. Play around with it a little bit and you'll figure something out sometime!!

It worked for me... Don't know how it got changed... But it worked.

If you need any help, I'll be pleased to guide you a little bit, reply to this thread or email me at [email protected]

- Gabriel from onegearatatime.com

[Brilu]

You are amazing!!! I struggled with this for ages and I just added the code and it worked! Thank you so much.

[fullintegration]

Wow, this worked for me too!!!  I can't thank you enough for this fix!!

[lilithwebsite]

Hi, I'm having an issue as I can't find the main_style.css file. I'm using the High Peal Birdseye 2 theme. Can you help? Thanks!

[Adam7]

Look for main.less, @lilithwebsite; our newer themes will use that instead of main_style.css.

[luma_d · Accepted solution]

Got stuck, was reading this thread and wanted to post here, since I solved the issue of font sizing on mobile phone screen after some poking around...

Under Theme > Edit HTML / CSS 
then open up Responsive.less (this is the stylesheet for mobile)

find the settings for p (stands for paragraph text, or body text)
I tweaked the font size for p from 16px to 18px ... I think it's more comfortable reading on mobile now.

You can also adjust the size of your header text (if you find that it seems too huge on the phone screen).

( Also, I don't think people should have to learn to edit CSS to be able to adjust the readability of their mobile displays...Weebly, please consider adding a dashboard with some basic controls for the mobile site - like the font sizing, which is a really common issue for people to encounter? )

[Bernadette3]

Thank you for sharing, @luma_d 

[testerfy]

Bless you! I have been trying to figure this out with no avail. I tried your solution and it worked! Thank you!!!

[Jureca]

I just applied this fix in 2021(!!!) and it worked on my "Unite - Unbound - Blog" Theme in Weebly. Text on mobile was waaayyyyy too small as 2016 poster noted. Just reporting here that code in Unite was same as posted far above - and the edits suggested did work for me! Thank you to original poster "Gabzarts"!