Firefox and Chrome show my portfolio differently in responsive mode

Firefox and Chrome show my portfolio differently in responsive mode
0

#1

Link - https://codepen.io/sxnaprkhr/full/PBvjNV/

Both ff and chrome show my portfolio differently in their respective responsive mode. Chrome shows my font-size very small and ff shows font-size as it should be.


#2

Not sure this is helpful, but I checked in Firefox and Chrome on my laptop and in Chrome on my phone and the font-size looked the same in all of them.


#3

It runs perfectly on firefox on my laptop but chrome shows as if the font is around 10px


#4

Which element’s font-size are you concerned about? The text under “About Me” or something else?


#5

Okay, I may have understood what is happening. When I open the Codepen’s full page view on ff and chrome, it runs perfectly but when I use Codepen’s debug mode, the font-size of every element seems to be diminished.


#6

Hmm, odd. I don’t use Codepen much, so I can’t speculate on what’s going on. Anyway, it seems like it’s not anything with your actual SCSS that’s the problem.

One small suggestion: right now the “Contact” link in your navbar butts right up against the vertical scrollbar, which doesn’t look great. If you add box-sizing: border-box; to the navbar, it looks a bit better. Just a suggestion. Cheers!


#7

Thank you so much for your suggestion. I updated the navbar with box-sizing:border-box, tbh I was struggling a bit with that. Any more problems with my code?