Forums

  • # 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 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

    # 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 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag