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

Home Forums CSS making an h tag font size shrink with browser

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #37714

    Heya there, on

    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


    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



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



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

    Chris Coyier

    @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.


    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 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.