The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] Media Queries + Headlines ?

  • # March 29, 2014 at 9:01 am


    so I am brushing off my MQ knowledge and learning new stuff.
    I came accros an issue with headlines in case they are too long.

    I know I could change font size but I was curious if there is a way to break the headline if consists of more than 2 words, 3, 4 words and prefferably on separate lines.

    Resize to smaller and you will see how the headline just “piles on top” instead of rearangind like normal pargraph.

    # March 29, 2014 at 9:14 am

    The “piling on top” is caused by the small line-height. When you would change that to a small unit-less number like 1, than it’s problem solved I think.

    #title-page h2 {
        line-height: 1;

    Eric Meyer on unit-less line-heights

    # March 29, 2014 at 12:02 pm

    This reply has been reported for inappropriate content.


    Is it really necessary to have your heading buried 5 elements deep?

    # March 29, 2014 at 1:57 pm

    ATELI . will try that, thanks

    WOLF . it is not but I bought theme client wanted , if I wrote the code it would be more semantic and way less cluttered

    # March 29, 2014 at 5:31 pm

    this is one of those “wow, what the, seriously … new stuff” moments :)
    thanks man, you fixed it for any width with1 line, great !

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed