{"id":1571,"date":"2011-02-21T17:26:41","date_gmt":"2011-02-21T16:26:41","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=1571"},"modified":"2016-08-29T17:48:41","modified_gmt":"2016-08-29T16:48:41","slug":"remove-html-line-breaks-for-mobile-devices-with-media-query","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2011\/02\/21\/remove-html-line-breaks-for-mobile-devices-with-media-query\/","title":{"rendered":"Remove HTML line breaks for mobile devices with @media query"},"content":{"rendered":"<p>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.<\/p>\n<p>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 <a href=\"http:\/\/www.font-face.com\/\">@font-face rule<\/a>. <\/p>\n<p>Another problem with HTML text is how lines of text break. If you aim to create a particular rhythm to your copy, you\u2019d probably want to control the length of each line. Naturally, you can use a <a href=\"http:\/\/www.w3.org\/TR\/html401\/struct\/text.html#h-9.3.2\">line break<\/a> to push the text into another line. <\/p>\n<p>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:<\/p>\n<p><code><\/p>\n<pre>\r\n@media (max-width: 480px) {\r\n    .your-particular-selector br { content: ' '; }\r\n}\r\n<\/pre>\n<p><\/code><\/p>\n<p>Thanks to <a href=\"http:\/\/www.guillerming.es\">Guillermo Siles<\/a> for improving the original code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,16],"tags":[25,34,69,33,84],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/1571"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=1571"}],"version-history":[{"count":2,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/1571\/revisions"}],"predecessor-version":[{"id":2779,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/1571\/revisions\/2779"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=1571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=1571"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=1571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}