How to Show Different Content on Mobile and Desktop in WordPress

To show different content on mobile and desktop in WordPress, you either hide blocks by screen size, so every device receives the same page and the browser hides what does not fit, or you let the server detect the device and send each one a different page. Hiding by screen size is the right choice for layout and works with any page cache; server-side device rules are for the rare case where a phone must not receive some content at all.

This article explains both approaches, how to set each one up (with the block editor, a page builder, a few lines of CSS or a plugin) and the two traps that catch most people: page caching and Google's mobile-first indexing.

Two ways to show different content on mobile and desktop

The difference is where the decision is made.

• By screen size (CSS): the whole page goes to every visitor. Styling rules, called media queries, hide some parts when the screen is narrower or wider than a set width. Nothing is removed, it is just not displayed.
• By device (server-side): when the page is requested, WordPress looks at what the browser says about itself (the user agent and, in modern browsers, a hint that says "mobile" or not) and builds a different page for phones and for computers.

For most sites the answer is the first column. Keep reading for when the second one is worth the extra care.

Option 1: hide blocks by screen size

This is what "responsive design" means in practice: one page, arranged differently on each screen. There are four common ways to do it.

The WordPress block editor

Since WordPress 7.0 the block editor can hide any supported block on desktop, tablet or mobile. You find the Hide option in the block toolbar and in List View, where a small icon marks blocks with a visibility rule. As the WordPress team explains in the developer note on block visibility, blocks hidden this way are still in the page and the hiding happens in CSS. The breakpoints are fixed in 7.0.

Your theme or page builder

Page builders have their own switches. In Elementor, for example, select a widget or container, open the Advanced tab and use Hide On Desktop, Hide On Tablet and Hide On Mobile in the Responsive section. Some themes offer similar options too. Check which widths your builder uses, since they may differ from your theme's.

A few lines of CSS

If you are comfortable with a little code, give the block a class name in its Advanced panel, under Additional CSS class(es), for example hide-on-phone. Then add this to your site's Additional CSS:

@media (max-width: 781px) { .hide-on-phone { display: none; } }

Change the number to move the breakpoint. For the opposite effect, use min-width with a class such as hide-on-desktop.

A plugin

With Content Gate Pro, each block's Visibility panel has a Hide on option with three boxes: Phone (screens up to 781 pixels wide), Tablet (782 to 1023 pixels) and Desktop (1024 pixels and more). It also works in CSS, so it is safe with page caching, and it needs Allow hiding blocks by screen size switched on in Settings, which is the default. On WordPress 7.0 the core option already covers simple cases; the plugin is useful when you also restrict the same block to logged in users or certain roles. See Restrict a single block.

Option 2: server-side rules by device

Here WordPress decides before the page leaves the server. Its own check, the wp_is_mobile() function, reads the browser's description of itself. The official reference is clear on three points: it does not measure screen width, tablets count as mobile devices, and any page cache must keep separate copies for mobile and desktop visitors.

When is that worth it? When a phone should not receive something at all, for example:

• a heavy embed, such as a large 3D viewer or configurator, that you prefer phones not to load;
• a desktop software download that makes no sense on a phone;
• a page that should send phone visitors somewhere else entirely.

How to set it up with Content Gate

Device conditions are a Pro feature. In a rule, step 6 Devices has two boxes, Desktop and Phone; nothing ticked means every device. The device is added to the group that keeps access: tick Desktop and only visitors on a computer who also match step 2 Who can see it get in, while phone visitors get what step 4 What everyone else gets says, such as a message or a redirect to a phone-friendly page. On a site where visitors do not log in, pair it with Only visitors who are not logged in.

For part of a page, the shortcode accepts a devices attribute: [content_gate who="logged_out" devices="desktop"]Download the software[/content_gate] shows the text only to visitors on a computer who are not logged in. The full list of options is in How rules work.

The plugin's guide itself advises leaving device rules alone unless you really need them. The server can tell a phone from a computer, not the exact screen size. Tablets count as phones, except recent iPads, which introduce themselves as a Mac and count as desktop.

Page caching and SEO: the two traps

Page caching

A page cache stores a ready-made copy of each page and serves it to the next visitors. If the first visitor after a cache clear is on a phone, the phone version can be served to everyone, including desktop visitors, until the cache expires. Screen-size hiding does not have this problem, because every device gets the same page.

If you use server-side device rules, do one of these:

• switch on the option of your caching plugin or hosting that keeps a separate cache for mobile devices, if it has one;
• exclude the affected pages from the cache;
• or ask your host how their cache handles mobile visitors.

Google indexes the mobile version

Google uses the mobile version of a page, crawled with a smartphone crawler, for indexing and ranking, and asks that the mobile version has the same content as the desktop one (see Google's mobile-first indexing guidelines). If you remove text on the server for phones, Google will probably never see it. Keep your important content on mobile, and use device rules for extras, not for the text you want to rank with.

How to test both versions

1. Log out, or use a private window. With Content Gate, administrators always see everything, so rules seem not to work from your own account.
2. Screen-size hiding: make the browser window narrower, or use the device view of your browser's developer tools, and watch the blocks appear and disappear.
3. Server-side rules: test on a real phone. A narrow desktop window is still a desktop for the server.
4. With a cache: clear it, open the page on a phone first, then on a computer, and check that each gets its own version.

Which option fits you

To show different content on mobile and desktop for layout reasons (a shorter heading, a smaller image, a phone-friendly button), hide blocks by screen size: use the block editor on WordPress 7.0 or later, your page builder's switches, or a line of CSS. It is simple, works with every cache and follows the responsive design approach Google recommends.

Use server-side device rules only when a phone must not receive something, and set up your cache for it. If you already use Content Gate to restrict content by user role, its Pro device conditions let you add that decision to the same rules.