CODE

CSS Visibility Based On Screen Size

ESTIMATE 2-MINUTE READ

Format Changes on Different Devices

The large display of a desktop computer has more screen real estate for browser windows. You can view more columns in tables or lists. Paragraphs with more than three sentences appear less dense than on narrow mobile devices.

When building a website, there are two ways to distinguish the width of the browser window. The first way is by using CSS to display elements based on pixel width. A second method requires a programming language that allows you to read and build an array of over 250 device names with corresponding resolutions.

Resolution-Based Format Changes

At one time all displays had the same resolution of 72 dpi (dots per inch). There was a slow upward creep in the 1990s between 90 and 120 dpi. Then Apple introduced Retina displays for iPhone. These tout resolutions near 300 dpi. Becoming a standard, tablet and desktop display resolutions increases. Now, some iPhones have resolutions above 400 dpi. While this makes text sharper, it is problematic for websites that display content based on display dimensions. Further complicating matters is the iOS option to load desktop versions of web pages.

The release of a higher resolution does not make prior ones obsolete. There are billions of devices in the world that consumers do not upgrade at the same time. Within the Avalanche suite of CSS productivity tools are the following suggestions for device resolutions:

/*! Avalanche | MIT License | @colourgarden */
$phone:            "screen and (max-width: 640px)";
$tablet:           "screen and (min-width: 641px) and (max-width: 1007px)";
$tablet-and-up:    "screen and (min-width: 641px)";
$pocket:           "screen and (max-width: 1007px)";
$lap:              "screen and (min-width: 1008px) and (max-width: 1139px)";
$lap-and-up:       "screen and (min-width: 1008px)";
$desk:             "screen and (min-width: 1140px)";
$widescreen:       "screen and (min-width: 1500px)";

They are used for many elements on this website. However, when testing a generation 5 iPad tablet, there is no distinction between portrait and landscape mode. That orientation change should trigger options that include larger text and removal of table columns.

@media screen and (min-width: 980px) { .no-big { display: none; } }
@media screen and (max-width: 979px) { .no-small { display: none; } }
@media screen and (max-width: 1140px) { .only-big { display: none; } }
@media #{$tablet-and-up} { .mobile-only { display: none; } }
@media #{$phone} { .desktop-only { display: none; } }

I also use some styles as a carryover from a previous site theme: class="no-small" hides elements in portrait view of iPad 5. To hide elements in landscape, use class="no-big". To display elements only on larger desktops, use class="only-big". To hide and display elements for mobile devices, use class="desktop-only" and class="mobile-only" respectively.

For tables, include the <td class="no-small"> style within table data to suppress columns on portrait view tablets. Hide another column on narrower devices with <td class="desktop-only">. For lists, add col2 or col3 within the <ol> or <ul> html tag.

.col2, .col3 {
  -webkit-column-gap: 3em;/* Chrome, Safari, Opera */
  -moz-column-gap: 3em; /* Firefox */
  column-gap: 3em;
  margin-bottom: 16px;
}
.col2 {
  -webkit-columns: auto 2; /* Chrome, Safari, Opera */
  -moz-columns: auto 2; /* Firefox */
  columns: auto 2;
}
.col3 {
  -webkit-columns: auto 3; /* Chrome, Safari, Opera */
  -moz-columns: auto 3; /* Firefox */
  columns: auto 3;
  @media screen and (max-width: 979px) {
    -webkit-columns: auto 2; /* Chrome, Safari, Opera */
    -moz-columns: auto 2; /* Firefox */
    columns: auto 2;
  }
}
@media #{$phone} { .col2, .col3 {-webkit-columns:1; -moz-columns: 1; columns: 1;} }

This feature is currently enabled on ClinicalPosters blog and article pages. Code samples include hidden formatting characters that can interfere with operation. Paste into a text editor and reveal invisibles before pasting into Shopify theme. Replace non-breaking spaces (&nbsp;) with regular space. Remove HTML line breaks (<br />). You may also need to replace HTML less-than (&lt;) and greater-than (&gt;) with actual characters. Are you interested in more tips and code snippets like this? Indicate so within the comment field.

References
  1. Screen Sizes. screensiz.es
  2. Colourgarden Avalanche. Tom Hare, github.com
  3. Our Site Responds Well To Your Device. ClinicalPosters.com
Kevin Williams is a Shopify Partner that has been program­ming data­base systems since 1990 and writing since 2010, before main­tain­ing an e-commerce site in Perl. Along with him, explore the Shopify platform and Liquid programming with marketing and writing tips.

Add Your Comment