Making Section Mobile-Only with Cornerstone

A question I get asked a lot is how to make a section within Cornerstone display only on mobile devices, or even to display completely different content for mobile devices. Luckily, X Theme and Cornerstone make this significantly easier to do than would be possible with WordPress by itself. There is an entire suite of functionality related exactly to this. Watch the following to get an overview of that functionality, or read on to find out how to hide a section for mobile devices.

Hiding a section on mobile devices

1. Select the section you wish to hide. Depending on what you’ve clicked, you may have to click the magnifying glass or “Section” link at the top.
2. Scroll down to the bottom of the options and find the section that says “Hide based on screen width.”
3. Click on whichever devices you wish to hide the section for. In our case, we probably want to click the phone on the right and optionally the two tablets as well.
4. Click “Save” at the bottom to save your changes.

That’s all there is to it! You just select the devices and screen sizes for which you want the section hidden. If you want the section to be mobile-only, you simply click all of the devices except the mobile one.

Potential uses

There are a lot of things you could accomplish using this method, but here are just a few ideas!

• Hide your giant slider from mobile-visitors and replace it with a small, static image that loads more quickly, improving load times and usability (effectiveness varies by browser and device)
• Display a deal special for mobile visitors
• Place a map or phone number right near the top for mobile visitors while leaving it the same for desktop browsers
• Duplicate an entire layer and customize its layout and display for each device

Really, you can do whatever you want! While X Theme is usually pretty good about being responsive and displaying things in a logical way for every device, sometimes it pays to customize it a little better by setting different content and layouts for each device as needed. Typically when we build a website, we test at every size and, if needed, customize things using sections that only display at certain widths.

Important things to keep in mind

Doubled Load Times

While the content you have hidden may not display, the code for it is still in the background and will take time to load. While it will vary by browser and device, some will even load images that are hidden, which, depending on what you’re trying to accomplish, may sabotage your attempts at faster load times by actually requiring the same content to be loaded twice. While I hope that mobile browsers don’t load any images that aren’t displayed, there isn’t good data available about this yet and so I’m not positive on it. I’ll try to do a follow-up blog post and test it myself. To be safe, I recommend that if you are using two different images, optimized for performance on different devices, set them as a background image of an element. Background images are much less likely to be loaded if they are hidden than regular image elements.

Removing functionality or content entirely is extremely frustrating to visitors

While it often make a great deal of sense to customize layouts or highlight certain information for different devices more strongly, I generally recommend you never hide any content or functionality entirely. For example, if, on your homepage, you display a grid of important links to the important parts of your website, people will come to expect that it will be there no matter what device they are on. If it’s the only way they know how to get around, and they are visiting from their cell phone while on vacation, odds are they are going to get angry when they can’t figure out how to do it because you’ve hidden the whole thing.

These are all based on browser-width as opposed to actual device

While this is really the best practice, keep in mind that these settings only take into account actual or simulated browser width when determining what to show. It may or may not be what you expect! For example, a small desktop monitor may end up displaying the tablet version of your site.

Conclusion

Cornerstone is a great tool, but sometimes you need to get a little more customized and manually control the display for mobile or desktop devices. We are lucky that it provides such great functionality to do this ourselves! As long as you know what you are doing, the possibilities are endless. Good luck!