Difference between Github.io and local browser?

If you go to my GitHub Pages site at https://t3hbrian.github.io, you can see that all the text is quite big.

I’m on Mac, so this might differ a bit, but if you go to your terminal and you type “git clone https://github.com/t3hbrian/t3hbrian.github.io” and then you open the index.html file locally you can see that the font size is much smaller, and much more natural looking.

It’s still the same font, Roboto, so it is working correctly. I’m using REMs which refers to the html root element for the size to set the font.

You can take a peek at the CSS in the resources folder, but I set the html root element to 62.5% of the regular font size, so my best guess was that Github Pages is messing with the number and putting the number at 100%.

However, I put that theory to the test and I changed the html root element font size locally to 100% and it still was a different size. So I’m pretty stuck and this is super annoying because it’s the exact same thing but it’s loading differently.

I’m not really sure what to do and I couldn’t find anyone with a similar problem, since I’m only using plain html and css. Thanks!

1 Like

Hi @itstehbrian,

Thank you for being here! I think this might have to do with Roboto itself, not the way Pages is rendering, could you try and test a different font?

1 Like

Hi @andreagriffiths11!

Thank you for responding. Sorry I posted twice, there was a bug for some reason the first post got deleted and then put back and I couldn’t delete it after that.

I changed the font to Helvetica which you can see by the console on both the images and the ‘e’, as Roboto has a much more relaxed ‘e’ and Helvetica has the tip of the ‘e’ perfectly straight.

Here is the image for the site hosted at Pages.

And here is the same exact site, copied by putting ‘git clone https://github.com/t3hbrian/t3hbrian.github.io’ and then making the change to Helvetica, then pushing *all* of the changes and files into the master at GitHub.

As you can see, the one hosted at GitHub pages has significantly larger text for no reason. As you can see the font size is set in REMs. For anyone else reading this who aren’t familiar with those, they are a size BASED on the root html element font size, which is where it gets its ‘r’ in the title.

You can see in the screenshot that the root is 62.5% of the default font size. This is for those who change their default font size that the website would adapt to that font. The default for everyone who does not change it, however, is 100% = 16px. So if you go into the REM and you type in 1 REM it would put it as 16px. To make the math easier, though, you can set it to 62.5%, which makes 1 REM be 10px, 0.1 REM be 1px, you get the idea.

My thought is that perhaps GitHub Pages is enforcing a certain size, say, 14 pixels, overwriting the 62.5% size. I put this in the original post but I forgot that I just set it to 100%. GitHub would still, in this idea, overwrite that. But I tried it with both being set to 16 pixels.

Same deal, pushing the exact same thing. Here’s GitHub Pages.

 Here’s the exact same repository, exact same everything, opened on my computer locally.

I’m really confused. I have no idea what’s going on and it should theoretically be the same, I’m pretty stuck and I can’t think of anything else.

Thanks, Brian.

1 Like

I was able to reproduce exactly what is being displayed on https://t3hbrian.github.io locally.  I did the following:

$ git clone https://github.com/t3hbrian/t3hbrian.github.io
$ cd t3hbrian.github.io/
$ jekyll serve --port 8001

So then I looked at your stylesheet.  You have huge values for the rem settings.  Remember that 8rem is 800% of the base html font value.  So I changed all of your 8rems to 1.8 rem which is what I think you meant.  so 4rem similarly became 1.4rem.  After that modifying main.css, the page looked normal for me.

$ git diff resources/css/main.css
diff --git a/resources/css/main.css b/resources/css/main.css
index 8da24f1..96bd795 100644
--- a/resources/css/main.css
+++ b/resources/css/main.css
@@ -5,42 +5,42 @@ html {

 body {
- padding: 0rem 5rem;
+ padding: 0rem 1.5rem;
        background-color: #faf8f8;

 h1 {
- font: 400 8rem 'Roboto', sans-serif;
+ font: 400 1.8rem 'Roboto', sans-serif;
        color: #323030;
/ * etc... */

Hi @sflanders95.

First off I would just like to say I’m very inexperienced with Jekyll and I haven’t use it at all. And it’s not used in this project, so I’m not entirely sure how you’re using Jekyll in your terminal. Again I’m very inexperienced so I have no idea how it works.

Secondly, the size isn’t the point. I don’t mind exactly how big or small it is, l just previously believed that opening my website via double-clicking index.html would provide the same results as opening it on GitHub pages, since it’s serving the same content.

Adding to this, no matter how gigantic 8rem is, if you look at my previous post’s screenshots you can see that the font sizes for both websites are the exact same, you can see this because of the console in the bottom literally saying that it’s giving my browser the same font sizes. It’s not to do with what is actually being given to the web browser to load, since it’s the exact same, it’s how it’s loading it.

So, I did a bit of looking into of Jekyll it seems that all it is, is that you give it Markdown or any markup language and through some themes it makes it into a static website. Since what I’m doing is more of a venture into learning HTML, CSS, and JavaScript, I don’t want to start learning frameworks or whatever Jekyll is.

The entire problem is that I’m confused as to how either getting the file and all associated files through my computer, and opening it through double-clicking index.html is different than the same file and _same associated files _through GitHub Pages.

I also opened the website up through Google Chrome and it’s the same result as me opening it in Safari. It’s not how big or small the text size is itself, it’s just that it’s different depending on how you get the _same exact _file.

Is there something to do with me opening it through index.html? Should I start using something like Jekyll so I can go to localhost:8001? Am I doing something wrong?

Thanks, Brian

@itstehbrian, since your site isn’t utilizing layouts you shouldn’t need jekyll.  I did that to most closely mimick the github pages server.  So I tried it again w/o jekyll:

SF:git sflanders95$ git clone https://github.com/t3hbrian/t3hbrian.github.io
Cloning into 't3hbrian.github.io'...
remote: Enumerating objects: 59, done.
remote: Counting objects: 100% (59/59), done.
remote: Compressing objects: 100% (43/43), done.
remote: Total 369 (delta 27), reused 29 (delta 10), pack-reused 310
Receiving objects: 100% (369/369), 34.26 MiB | 8.97 MiB/s, done.
Resolving deltas: 100% (172/172), done.
SF:git sflanders95$ cd t3hbrian.github.io/
SF:t3hbrian.github.io sflanders95$ open index.html

The above session opened up chrome on my mac.  It exactly resembles the page on github down to the animated text.  My chrome://version/ is 69.0.3497.100 (Official Build) (64-bit).  Having tried it two different ways and getting the same results my next suggestion would be to:

  1. use the “open index.html” statement in a terminal as I did above to ensure the correct file is being displayed. and…
  2. hold the “Shift” key as you click on the chrome refresh button when viewing your local copy to ecourage chrome not to use any cache.  

Screenshot at Oct 20 19-11-08.jpg

Another thing that I noticed in local and on github pages is that when I “inspect” the page, then click on the html tag in the “elements” window, and look at the corresponding “styles” window, I see a yellow triangle next to the font-size: 62.5; item.   When I hover over the warning icon, it says invalid property value.  Do you get that in both online and local inspections.  Hope that helps.


1 Like

Hello! Thanks for the reply @sflanders95. Also tagging @andreagriffiths11 just so they can see the fix.

I’ll look into the issue with font-size: 62.5% showing up as an error, but onto more pressing matters.

I’ve been having this problem for a while, even for websites that were completely different but were on the same repository, and named the same. This problem has been happening for months. I think you know where I might be going with this.

My browser I usually use is Safari. You were testing on Google Chrome and I figured I should try that too, since maybe it’s a Safari only problem. I go to Google Chrome and the websites are the exact same. Same font size.

I start figuring Safari is bad for web development, but then I figure maybe Safari has it cached, just like you told me to reload the page while ignoring caches on Google Chrome. So I went into Safari and removed all caches for t3hbrian.github.io. Still the problem remains. Then I remember…

On Safari you can use CMD plus the ‘+’ or ‘-’ keys to make the page bigger and smaller respectively. You can also use CMD plus ‘0’ to reset it. I figure, hey, maybe this entire problem was that Safari keeps the size you set for the website indefinitely, and apart from the cache/cookies, and I had made the page bigger before, and since I kept my repository for my website on my desktop folder all the time and never move it so the location would be the same…

I pressed CMD+0.

It became the same size as on GitHub Pages.

It seems that I was just receiving the error code 1D10T.

Thanks, this thread can be closed.


Hey, @sflanders95 Thanks a lot for all your help here and @itstehbrian I’m glad you figured it out! Thank you for sharing the fix. We’re looking forward to seeing you around!

1 Like

God! Thanks a lot for solution !

1 Like

Wow! That really made me feel like an idiot. I was the one that set the default font size. OMG

I am having the same exact issue.

I am having the same issue too, did you figure this out?

Yup. You can see my reply up above, but in a nutshell, my browser scaling was set higher for the local url.

Same happened to me! Holy molly , thanks for sharing the solution. Now i have to rezize everything lol.