Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 3
Message 1 of 9

Difference between Github.io and local browser?

Solved! Go to Solution.

If you go to my GitHub Pages site at https://t3hbrian.github.io, you can see that all the text is quite big.Screen Shot 2018-10-17 at 12.27.18 AM.pngThe Github Pages version.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.

Screen Shot 2018-10-17 at 12.27.53 AM.pngThe local version.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!

8 Replies
Community Manager
Message 2 of 9

Re: Difference between Github.io and local browser?

Hi @T3hBrian,

 

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?

Mark helpful posts with Accept as Solution to help other users locate important info. Don't forget to give Kudos for great content!

Copilot Lvl 3
Message 3 of 9

Re: Difference between Github.io and local browser?

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.Screen Shot 2018-10-20 at 12.40.59 AM.png

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.Screen Shot 2018-10-20 at 12.41.02 AM.png

 

 

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.

Screen Shot 2018-10-20 at 12.50.54 AM.png

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

Screen Shot 2018-10-20 at 12.50.57 AM.png

 

 

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.

 

 

 

 

Copilot Lvl 3
Message 4 of 9

Re: Difference between Github.io and local browser?

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...  */

 

 

 

Copilot Lvl 3
Message 5 of 9

Re: Difference between Github.io and local browser?

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

Copilot Lvl 3
Message 6 of 9

Re: Difference between Github.io and local browser?

@T3hBrian, 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.

-Steve

 

Solution
Copilot Lvl 3
Message 7 of 9

Re: Difference between Github.io and local browser?

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.

Community Manager
Message 8 of 9

Re: Difference between Github.io and local browser?

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

 

Mark helpful posts with Accept as Solution to help other users locate important info. Don't forget to give Kudos for great content!

Ground Controller Lvl 1
Message 9 of 9

Re: Difference between Github.io and local browser?

God! Thanks a lot for solution !