Browser font re-sizing kills web layout

[kamaboko]

Hello,

If I go into the settings menu in Google, Firefox, IE, etc, and change the font size, the result is an absolute mess. To be clear, I’m not talking about zooming, but to change the fonts to extra small, small, medium, etc. How does one prevent this from happening? For instance, when I do that here in CSS Tricks it’s as though it has been disabled. Nothing happens. My site on the other hand takes a hit in ever aspect: menu is way too big/small and not properly aligned, text bleeds into other text. Ughh…gross.

Thanks,
K

[Paulie_D]

Without code it’s hard to help..but I’m assuming that your layout is em based?

If you can reproduce the issue in a Codepen.io example we might be able to offer advice on your specific issue.

[kamaboko]

Hi Pauli,

Thanks for your reply. I don’t have anything in code pen (nor a subscription), but maybe a link to the site will help. Check it out in any browser you prefer and change the font size in the browser settings. You’ll see how everything falls apart.

http://dave65.com/AJHandyman/carpentry.php

Thanks,
K

[Paulie_D]

You don’t need a suscription to use Codepen.

It’s free to use without one but a subscription offers additional features.

[kamaboko]

What code would you like to see that would be helpful? I’ve got something like 8 php pages, a lot of CSS, etc.

[Paulie_D]

What I see from inspecting the site is a lot of fixed pixel value widths and other properties.

Then the font-size increases then there isn’t enough room in some elements to contain all that extra space and so the layout breaks.

If you want the site to adapt to different viewports and font-sizes then you have to use proportional values (like % or em etc) throughout the site.

Also, you might want to look into media queries to adjust font-sizes at smaller viewports

[kamaboko]

OK, let me put something together in code pen and I’ll post it here for you to take a look at. Also, your help is MUCH appreciated. I’ll try to get this out within 10 minutes or so.

[Paulie_D]

I suggest you check out my subsequent post.

A demo isn’t really going to be much help….you need to start refactoring how you layout the sites.

Start looking into responsive layouts etc.

[kamaboko]

So…this might be a bit extreme on the example, but I want to make sure I understand your point that I must use % or em throughout the site. I look forward to your comments.

How do I provide a link for the code pen? I just tried, but was told anonymous code pens are not allowed.

[kamaboko]

Here we go…

http://codepen.io/kamaboko/pen/OVdgrp

[kamaboko]

Hi bearhead,

Thanks for your reply. I will definitely look into em and px more. Honestly, I didn’t consider the consequences of mixing the two ( or individually ) prior to doing a font re-size on Google. A big lesson learned.

And one more thing…if you know of how to disable the effects of a font re-size on browsers I’d like to know how that is done. I see that CSS-Tricks is not affected in anyway by a browser font re-size. Ideally that’s what I’d want.

[Paulie_D]

I’ve only done a little testing with chrome, but it appears as though fonts with heights set in pixel values do NOT get re-sized by chrome. However fonts in em values do.

True…if we were talking about zooming (I think) but we’re not (again, I think).

My assumption was that the OP was referring to changing the base font size…so naturally, if the text gets bigger it takes up more room and if there isn’t enough room in a fixed px value width then…snap!

[bearhead]

chrome has separate controls for zoom and font size… I was changing just the font size, so that should be what the OP was meaning right?

It looks like the font size control in chrome influences the default font size of a webpage. Therefore, it will affect any fonts not set to an explicit pixel height.

check out this pen:
http://codepen.io/kvana/pen/vObeKr

and change the font-size in chrome. You’ll see that only the text without px font-sizing will change.

[Author]

Posts