Survey Project - Responsive Scaling Issue

Code Feedback
1

Hello everyone, I hope you’re all ok.

I’m fairly new to coding but I’m really enjoying it so far. Usually when I encounter a problem I’ll spend a bit of time thinking about it, take a break and when I return, t-da! - I get a light-bulb moment.

Unfortunately the latest issue is really confusing me.

Working responsively (mobile-first) I’ve defined a root font-size of 10px in my body element which, when viewed in the Chrome Responsive Dev window, is behaving oddly. When I set the font-size for the first div (.container) the jump from 1.5rem to 1.6rem is massive.

Every 0.1rem before and after those breakpoints are fine.

Any help would be massively appreciated, thanks!

https://codepen.io/bpw84/pen/rNVdERP

:smiley:

2

I might be wrong with this but, it can be the font type.
When you use a diffrent browser it somethimes can not recgonize the font/certain elements you are using thus getting back to the default. Which could explain the change in size

1 Like
3

Thanks for your response.

I’ve just taken my custom font out and tried Arial and I’m still having the same issue.

Update: I’ve just added to my and that’s fixed it.

(That’s my stupid act of the day done and dusted)