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?

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.png1280×800 106 KB

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.png1280×800 107 KB

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.png1280×800 107 KB

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

Screen Shot 2018-10-20 at 12.50.57 AM.png1280×800 105 KB

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.

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.  

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

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!

God! Thanks a lot for solution !

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.