Remove HTML line breaks for mobile devices with @media query

|Reading time: 52 secs

The old school way of setting large decorative texts on web pages involved some kind of CSS image replacement, enabling a fine-grained control over how type and text render.

Now that we have web fonts available, we can avoid image replacement and apply virtually any font to a plain HTML with a little help of @font-face rule.

Another problem with HTML text is how lines of text break. If you aim to create a particular rhythm to your copy, you’d probably want to control the length of each line. Naturally, you can use a line break to push the text into another line.

To enable natural flow of text on mobile screens which are narrower than the horizontal text block offset on large sizes, you can simply hide it on small screens with @media query:

@media (max-width: 480px) {
    .your-particular-selector br { content: ' '; }
}

Thanks to Guillermo Siles for improving the original code.

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?