CSS Visibility Based On Screen Size

What you display on a large computer screen must be simplified for a small device. Alternate formatting or hide elements to optimize responsiveness.

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 {
  column-gap: 3em;
  margin-bottom: 16px;
}
.col2 {
  columns: auto 2;
}
.col3 {
  columns: auto 3;
  @media screen and (max-width: 979px) { 
    columns: auto 2;
  }
}
@media #{$phone} { .col2, .col3 { columns: 1;} }