Skinny Banners and the Corporate Laptop

Many corporate laptops display in 1366 x 768 pixel resolution, as do many budget models purchased from discount stores. The low vertical display height triggers media queries in some Squarespace templates causing banner images to display in a slimmer format that normal. You may not want those slimmer banner images, and you can override the behavior with a bit of CSS. 

Note: The specific examples that follow apply to the Bedford template. The general technique however, should be valid for most templates that include banner images in their design. 

Recently I was contacted by a designer working on a Mac who had just learned that his clients were displeased at seeing skinny banner images from their Windows machines. Using my own site as an example, the designer saw images such as in Figure 1, whereas the clients saw much slimmer images such as in Figure 2.

Figure 1. Banner as seen by the designer

Figure 2. Skinny banner seen by client

My solution was to eliminate the 768-pixel breakpoint. Doing so required that I find the specific CSS rule implementing that breakpoint, so that I could override that rule with a new one. Here's what I did:

  1. I right-clicked the banner and selected Inspect to open the HTML inspector.
  2. From there, I navigated through the page's HTML tree looking for a banner wrapper.
  3. Having found the wrapper, I looked in the right-side pane to review relevant CSS rules.
  4. Prior experience had led me to expect that it might be padding values that changed between devices, and Figures 3 and 4 show that indeed such was the case.

Figure 3 shows the banner wrapper element on the left. A CSS rule in the right-side pane specifies the normal padding of 180 and 155 pixels, top and bottom. Figure 4 is from a 1366 x 768 display and shows the same wrapper element, but the short screen has triggered a CSS media query that reduces padding to 60 and 20 pixels respectively. 

Figure 3. Normal banner padding

Figure 4. Banner padding on small devices

Writing an override rule is easy. Begin with the same media query used to make the banner narrow. This is the media query from Figure 4. Then plug in the padding values from Figure 3, ensuring that those values are also used for small-screen devices. Here's the resulting rule, which I handed the designer to place into his Custom CSS Editor:

@media only screen and (max-device-height: 768px) {
  .view-list.transparent-header .banner-thumbnail-wrapper {padding: 180px 0 155px;}
}

At this point, the designer was happy. Because his clients were happy! The banner images on their site worked best at full height all the time, even on phones and tablets. Job done.

But there is a twist here, and you can take things one step further. You can effectively change the breakpoint to be 767 pixels. Doing so allows full-height banners on laptops with 768-pixel-high displays while continuing to allow narrow images on many if not most phones and small tablets. Toward that end, you can "stack" two rules as follows:

@media only screen and (max-device-height: 768px) {
  .view-list.transparent-header .banner-thumbnail-wrapper {padding: 180px 0 155px;}
}
@media only screen and (max-device-height: 767px) {
  .view-list.transparent-header .banner-thumbnail-wrapper {padding: 60px 0 20px;}
}

First is our rule to override the padding and show images at full-height on screens that are 768 pixels high. Then comes a rule to reduce padding on devices having screens of 767 pixels in height or less. These rules yield normal-height images on most laptops, while still providing for thinner images on small phones and tablets.

Now there's nothing inherently right or wrong about a design breakpoint at 767 pixels instead of 768. The approach I show in this post is entirely pragmatic in recognition that the world is full of Windows laptops having a 768-pixel screen height, and one gets tired of explaining to clients and others why banner images are narrow on those machines. That's it. Pure and simple.


Learn CSS for Squarespace 7
9.99

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart