{"id":19872,"date":"2013-01-16T10:12:07","date_gmt":"2013-01-16T17:12:07","guid":{"rendered":"http:\/\/css-tricks.com\/?p=19872"},"modified":"2013-01-16T10:12:07","modified_gmt":"2013-01-16T17:12:07","slug":"zooming-squishes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/zooming-squishes\/","title":{"rendered":"Zooming Squishes"},"content":{"rendered":"

There has been some talk recently about turning off responsive design: Bruce Lawson<\/a>, Webmonkey<\/a>, and I also I wrote about it<\/a> a while back. To be clear, I’m a big fan of responsive design, but I hope we can all agree there is no sense being dogmatic<\/a> about a tool.<\/p>\n

As fate would have it, I got an email from a reader:<\/p>\n

I work with a 13″ MacBook Air and I use zoom a lot while surfing around because I haven’t the best eyesight.<\/p>\n

Your site is difficult to do this because, the global % width is squeezing the content in. I found this “bug” in a lot of RWD websites. It makes it hard for me to access to the content.<\/p><\/blockquote>\n

They are right. A few zooms isn’t a big deal, but when you get to four or five the content gets pretty garbled up. <\/p>\n

<\/figure>\n

Just out of curiosity, I asked: “Would it be better for you if the page expanded wider than the width of the browser window? So you’d have to horizontally scroll as well?”<\/em><\/p>\n

Yes, I prefer scrolling horizontally. I think if I’m the cause of breaking the page by zooming in, It’s also my responsibility also to scroll horizontally.<\/p><\/blockquote>\n

That’s interesting to hear, since horizontal scrolling is one of those universally reviled things by web designers that we try and avoid at all costs. Even in the fixed width days. Should we bump up to *gasp* 1024px wide sites? No! It might cause horizontal scrolling! <\/p>\n

To be clear, I still think it’s a bad thing, it’s just interesting that someone feels “responsibility” to do it if they “break” the page. It’s a bummer they need to feel like they need to “break” the site to be able to read it at all.<\/p>\n

This is my fault. But EM-Based media queries can fix! Kinda!<\/h3>\n

My media queries were in pixels. If changed them into EMs, then as you zoom in, the EM size changes, and the media queries should take effect where the pixel ones would not. So that’s what I did and it works great! But please note: you have to refresh the screen to see the media query take effect,<\/strong> it doesn’t happen as you zoom. I wish it would, but I also suspect people who do this a lot know to refresh. Also in my experience, at least Chrome is particularly persistant with your preferred zoom level on a site-by-site basis.<\/p>\n

My base font size is 16px, so I just did a “Find in Project” for every single one of them and converted them.<\/p>\n

@media (max-width: 1200px) { }<\/code><\/pre>\n
became<\/p>\n
@media (max-width: 75em) { }<\/code><\/pre>\n
Fortunately I use fancy Sass @content mixins<\/a>, so the vast majority of them were changed by changing one mixin.<\/p>\n
Note that I even notch down<\/em> my font-size for smaller widths, but the browser zoom is more than enough to actually make the text larger.<\/p>\n
Also credit where credit is due, Lyza Gardner showed us the advantages of em-based media queries<\/a> nearly a year ago.<\/p>\n
Too big of an assumption?<\/h3>\n
So now I’ve “fixed” this and the layout no longer “breaks” when zoomed in. But is this absolutely better for the reader who wrote to me? They specifically told me they preferred horizontal scrolling and that’s not the solution I delivered. I’m assuming that a non-broken layout without<\/em> horizontal scrolling is even better. But who knows, maybe they don’t like the mobile layout, even thought I don’t limit what you can do. Always a dance.<\/p>\n","protected":false},"excerpt":{"rendered":"
Responsive designs can squish content inward when zooming, breaking a decent layout after just a few zooms. One reader writes in who really dislikes this on CSS-Tricks. But it’s (mostly) fixable! Just make those media queries EM-based instead of pixel-based.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":18211,"url":"https:\/\/css-tricks.com\/user-opt-out-responsive-design\/","url_meta":{"origin":19872,"position":0},"title":"Opt-Out Responsive Design?","date":"September 12, 2012","format":false,"excerpt":"Should we allow users to opt out of our responsive designs? Isn't that admitting failure? Or are there reasonable circumstances when it's a good thing? How would we do it?","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198488,"url":"https:\/\/css-tricks.com\/probably-use-initial-scale1\/","url_meta":{"origin":19872,"position":1},"title":"Probably Use initial-scale=1","date":"March 18, 2015","format":false,"excerpt":"If you're doing responsive design, you're using viewport tags. These tell the browser what width it should render the viewport at. If you don't use this tag, it will render at the device's default, which almost certainly isn't what you want. But even if you are using viewport , there\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":188838,"url":"https:\/\/css-tricks.com\/front-end-masters-2\/","url_meta":{"origin":19872,"position":2},"title":"Sponsor: Frontend Masters \u2013 Expert Web Development Training","date":"November 20, 2014","format":false,"excerpt":"Frontend Masters produces quality video training by industry leaders like Kyle Simpson, Douglas Crockford and Estelle Weyl. These are super in-depth courses designed for intermediate and advanced developers. They have two fantastic workshops coming up: Level up your JavaScript in a big way with Dive into JavaScript, jQuery and Pure\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":306139,"url":"https:\/\/css-tricks.com\/a-guide-to-the-responsive-images-syntax-in-html\/","url_meta":{"origin":19872,"position":3},"title":"A Guide to the Responsive Images Syntax in HTML","date":"May 26, 2020","format":false,"excerpt":"This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). We'll go over srcset and , plus a whole bunch of things to consider to help you get the best performance and design control from your images.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/resp-images-thumb.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":281855,"url":"https:\/\/css-tricks.com\/table-design-patterns-on-the-web\/","url_meta":{"origin":19872,"position":4},"title":"Table design patterns on the web","date":"January 28, 2019","format":false,"excerpt":"Chen Hui Jing has tackled a ton of design patterns for tables that might come in handy when creating tables that are easy to read and responsive for the web: There are a myriad of table design patterns out there, and which approach you pick depends heavily on the type\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/tables.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":239489,"url":"https:\/\/css-tricks.com\/accessible-simple-responsive-tables\/","url_meta":{"origin":19872,"position":5},"title":"Accessible, Simple, Responsive Tables","date":"March 22, 2016","format":false,"excerpt":"There is no single solution to make any appropriately responsive. That's what I like about this post by Davide Rizzo: it admits that, then gets on with some solutions. This is a great addition to territory we've been treading for a while. Content and Comparison tables There are many types\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19872"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=19872"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19872\/revisions"}],"predecessor-version":[{"id":19876,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19872\/revisions\/19876"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=19872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=19872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=19872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}