Grow your CSS skills. Land your dream job.

making an h tag font size shrink with browser

  • # April 20, 2012 at 9:47 pm

    Heya there, on http://bit.ly/I9imVs

    it is a responsive theme and the h1 text/site-logo on top remains a large h1 tag when the width is shrunk.

    when the browser is very small, like on a cell phone, id like to have the title shrink down and remain horizontal, and not have the text fall beneath each other.

    whats the most effective way to do this, and im really not experienced with media queries so any advice with some kind of example would be appreciated as well.

    Thank you

    # April 20, 2012 at 10:24 pm

    Media queries’ bark is worse than their bite…they can be scary at first…

    http://jsfiddle.net/p9DZV/

    Should be a good simple example…

    # April 20, 2012 at 10:35 pm

    it makes sense but with my lack of knowledge on media queries, i made these changes and the picture on the home page gets stuck and the h1 text on top remains at one size, this also negatively effected the menu as well .

    im scared :(

    # April 20, 2012 at 10:38 pm

    hmm, shouldn’t have effected anything but h1 tags…

    # April 20, 2012 at 10:40 pm

    :) thank you!

    # April 20, 2012 at 10:52 pm

    Ok, so a little investigating revealed that you pasted it into another media query, which is why it didn’t work….also, for some reason, jsfiddle added in some strange characters….so, I went ahead and resized it as necessary for you…

    Replace the code in you “media-queries.css” with all of the code in the pastebin below:

    http://pastebin.com/Zjd1Mwx7

    # April 20, 2012 at 11:09 pm

    thanks man you rock!

    # April 21, 2012 at 4:51 pm

    For this example media queries aren’t required. You may use this:


    body {
    font-size: 100%; /* Makes the font go to 16 pixels */
    }

    h1 {
    font: 1.125em arial; /* 18px : 16px = 1.2em*/
    }

    Now the font will resize and this resizing will be done based on the width of the browser. No media queries, no nasty tricks. Just standard CSS that works on every browser.

    The golden formula is:
    target : standard = font-size in em

    # April 22, 2012 at 1:10 am

    hmm im gonna give this a shot in a bit, im juggling right now, thanks vermass!

    # November 28, 2012 at 11:55 am

    Vermaas,

    Can you help me with this. I’m trying to what you suggested above and it doesn’t seem to be working for me.

    # November 28, 2012 at 11:58 am

    @strauss884

    Do you have link or, if not, put your HTML/CSS in Codepen and we can look further.

    # November 28, 2012 at 12:02 pm

    Make sure to also check out:

    http://fittextjs.com/

    and

    http://css-tricks.com/viewport-sized-typography/

    # November 28, 2012 at 12:08 pm

    @strauss884 : Like @chriscoyier pointed out, fittext.js is simply amazing. I have used it quite a few times. I suggest looking at Chris’s forked copy though. Take advantage of the parameters with fittextjs because it will really control the size.

    # November 28, 2012 at 12:14 pm

    gsld.net/civic2/civic2.html

    I want the caption text to shrink so it looks more appropriate in relation to size of photo on smaller devices and window sizes.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".