Skip navigation
Foto Cymru
Foto Cymru Calculating status...
Currently Being Moderated

Resizing Text in Fluid Grid Layouts

Jan 26, 2013 11:11 AM

I'm new to Fluid Grids, and have got the fluid div's resizing properly across the different devices, however when I try to set font sizes they don't resize automatically, I know I can set the font sizes manually in CSS for each device but this is not always sutable, for example I have a div with a background colour and the iv is filled with a mission statement,  however as the div expands the text gets smaller and doesnt have the same impact, how can I set the fonts to size up automatically to fill the div, can this be done with percentages and what is the relation of the percentage in the font size to the size of the div and text, thanks in advance

493 Views   3 Replies   Latest reply: Nancy O., Jan 27, 2013 11:39 AM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Jan 26, 2013 11:32 AM   in reply to Foto Cymru
    Report

    I use a separate style sheet for content styles and add media queries near the bottom for device specific rules (mobile, tablet, desktop).

     

    Example:

    http://alt-web.com/FluidGrid/Fluid.html

     

    Style sheet:

    http://alt-web.com/FluidGrid/Content.css

     

     

    Nancy O.

     
    |
    Mark as:
  • Foto Cymru
    Currently Being Moderated
    2. Foto Cymru,
    Jan 27, 2013 5:42 AM   in reply to Nancy O.
    Report

    hi Nancy,

     

    that look like what I was looking for I will try it out later, thanks very much for your assistance, its much appreciated.

    Can you just clear one thing up for me though, with the font size in percentage, what is the percentage value related to? is it a standard font size then the font resizes to 'x' percent of that size, or is it related to something else.

    Thansk in advance.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Jan 27, 2013 11:39 AM   in reply to Foto Cymru
    Report

    Browser default = 100%. Depending on your browser's preference settings, 100% usually = 1em or 16px.

     

    Nancy O.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points