Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Browser font re-sizing kills web layout

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #206104
    kamaboko
    Participant

    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

    #206105
    Paulie_D
    Member

    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.

    #206109
    kamaboko
    Participant

    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

    #206110
    Paulie_D
    Member

    You don’t need a suscription to use Codepen.

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

    #206111
    kamaboko
    Participant

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

    #206112
    Paulie_D
    Member

    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

    #206117
    kamaboko
    Participant

    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.

    #206119
    Paulie_D
    Member

    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.

    #206120
    kamaboko
    Participant

    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.

    #206121
    kamaboko
    Participant
    #206123
    kamaboko
    Participant

    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.

    #206134
    Paulie_D
    Member

    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!

    #206135
    bearhead
    Participant

    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.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.