How to Display Different Website Content on Mobile and Desktop

In the days of print, right up through the early web, the aspect ratio of any particular medium tended not to vary all that much.

These days, your content has to scale automatically to fill a rectangle of nearly any dimension.

What’s worse, the two most common screen sizes, together accounting for 96% of internet traffic, have completely opposite aspect ratios: one is wide, the other is tall.

The Basics of Screen Testing

(It’s not just for actors!)

The sheer diversity of screen sizes is why “adaptive design” is a critical component of modern web development. The good news is that platforms like Squarespace will do most of the heavy lifting for you.

Even so, professional web designers will screen-test their sites before launch with tools that mass-render their content on various screen sizes and various browsers, since both can affect how your site will appear to visitors.

You may not need to get that sophisticated with your site, especially since the most powerful screen test apps, like LambdaTest, come at a cost. But there are some basic free tools you might want to look into, such as Multi-Screen Test.

Device also matters. Screens are not the same. In fact, device manufacturers make it a point to add features or settings that they think will improve the user experience for their customers as a point of differentiation.

Some devices, such as those made by Samsung, leave the factory with a color setting called “saturation” set very high. In practical terms, that means any difference in color will be magnified, and dots, streaks, or other faint inclusions in your images may be visible on some screens and not others.

Just because your site looks good on your screen doesn’t mean it looks good to everyone.

At a minimum, it’s a good idea to download the most popular browsers (Chrome, Safari, Firefox) on all of your devices and to check how they render your site at various window sizes, and to ask your friends and family to live-test the site on their devices as well. And don’t forget tablets.

The Basics of Multi-Screen Formatting

Even with a drag-and-drop builder like Squarespace, odds are you will reach a point where portions of your site will need to look different on mobile and desktop.

For that, you need a little CSS.

If you don’t know what CSS is, unfortunately the name isn’t going to help you. CSS stands for Cascading Style Sheets, and about the only part of that acronym that makes any sense is the word ‘style.’

CSS determines the “presentation layer” of your site. In other words, it tells the browser how to render the content it finds there.

CSS doesn’t define that content. It doesn’t say that something is a table versus a text block versus an image. HTML does that. CSS determines the aspects of those blocks, such as how much of the screen an image is allowed to fill, the padding between the rows of a grid, the margins around a text block, and appearance of the text: font size, font color, line spacing, and so on.

CSS can also hide or display content based on certain conditions, including screen size, which is a key component of controlling how your site appears on various screens.

Step One: Decide on a Breakpoint

The breakpoint is the width of the display area measured in pixels. It tells the browser when it should display the content for narrow screens, like mobile devices, and when it should display the content for wider screens, like laptops and TVs.

The display area is not the same as the screen size, but it can be. If you shrink the size of your browser window, the browser will re-render the site to display in the smaller area.

When the width of the display area drops below the breakpoint, the browser changes the content.

You can use whatever breakpoint you want, and if you have highly stylized content, you might want to test various breakpoints.

You can also have more than one.

If you know for a fact that people will be viewing your content on tablets as well as mobile devices and computers, you might want to set two break points: one for switching from mobile to tablet and one for switching from tablet to laptop.

If you aren’t sure, use 768 pixels, which is the industry-standard breakpoint between “mobile” and larger devices.

Step Two: Find Where to Add CSS

For example, from the Squarespace dashboard, you would click on Design and then Custom CSS. Other services should be similar, but if you’re not sure, a quick Google search should set you straight.

Step Three: Add CSS in the Proper Format

Hide on Mobile

If you want to hide certain blocks on tall, narrow screens like mobile devices, you would add the following code:

@media screen and (max-width: 768px) {
     #block-ID1, #block-ID2, #block-ID3 {
          display:none;
     }
}

…where the block IDs are the specific IDs of the blocks you want to hide, separated by commas.

If you don’t know how to find the block IDs, use this extension.

In some cases, a browser might interpret other formatting of those blocks as having a higher priority and continue to display the blocks anyway, in which case you add the !important command before the semicolon, like this:

@media screen and (max-width: 768px) {
     #block-ID1, #block-ID2, #block-ID3 {
          display:none !important;
     }
}

Follow Best Practices

It’s also a good idea to add a label to each CSS entry so you will remember what it was for when you come back later.

It’s especially helpful to remind yourself where you can find the blocks in question. You’re not going to remember that #block-bf12f29098b627c8c416 was on your Contact page. If you ever remove or change that page, you’ll want to update your CSS to delete the reference to a block that no longer exists.

Add notes to your CSS code by enclosing text in // TEXT // for a single line or /* TEXT */ for multiple lines of text, as below:

// Mobile Screen Formatting of Contacts Page //
@media screen and (max-width: 768px) {
     #block-ID1, #block-ID2, #block-ID3 {
          display:none !important;
     }
}

Hide on Desktop

Hiding blocks on desktop is basically the same, so we won’t repeat all of the above. If you jumped right to here and didn’t read the section above, you might want to do that.

The only difference is that, instead of specifying a maximum screen width, we specify a minimum width at the same breakpoint:

// Desktop Screen Formatting of X Page //
@media screen and (min-width: 768px) {
     #block-ID1, #block-ID2, #block-ID3 {
          display:none !important;
     }
}

In other words, for screen widths of 768 pixels or higher, hide the blocks in the list.

Other Uses

Of course, you can do more than just hide blocks. We can’t get into too much detail here, but it is worth giving a few examples.

You can set the maximum width of an object on a mobile screen. In this example, 20%:

// Mobile Screen Formatting to X Page //
@media screen and (max-width: 768px) {
     #block-ID1, #block-ID2, #block-ID3 {
          width:20% !important;
     }
}

You can change the font size and line height in a block with text, making it smaller on mobile screens:

// Mobile Screen Formatting to X Page //
@media screen and (max-width: 768px) {
     #block-ID1, #block-ID2, #block-ID3 {
          line-height: 0.8em;
          font-size: 0.8em;
     }
}

Of course, that’s just a sample. There’s a ton more you can do with CSS. But hopefully this gets you started.

If you need more help: