Mobile Settings
Last updated: July 21, 2025
It’s important to build a mobile-friendly website to ensure accessibility and usability for the growing number of users accessing the internet primarily through mobile devices. Considering a mobile-friendly layout when building a website is crucial for many reasons, including:
- User experience (UX): More people are accessing the internet via mobile devices such as smartphones and tablets. A mobile-friendly layout ensures that users can easily navigate and interact with your website regardless of the device they are using. This enhances the overall user experience, leading to higher engagement and conversion.
- Search engine optimization (SEO): Search engines like Google prioritize mobile-friendly websites in their search results. Websites that are not optimized for mobile devices may rank lower in search engine results pages (SERPs), resulting in reduced visibility and traffic.
- Accessibility: A mobile-friendly layout improves accessibility for users with disabilities who rely on mobile devices or assistive technologies to access the web. By ensuring the website is compatible with different screen sizes and input methods, you make it easier for all users to consume the content.
How to Access Mobile View on Desktop
To view a website on a desktop as a mobile view, you can use the Developer Tools built into most modern web browsers such as Google Chrome, Firefox, Safari, or Edge.
Watch the video below to view how to switch a desktop view to a mobile view in Firefox.
Other browsers have similar developer tools for simulating mobile views, usually accessible through their respective developer or inspection tools.
Mobile-Specific Settings
In this section, we will explore the essential mobile-specific settings available in WordPress, allowing you to optimize your website’s performance and user experience across various mobile devices.
Mobile settings need to be changed from a per page, per row or block basis; there is not a universal mobile settings area on the left-hand sidebar menu.
Video in Jumbotron
It is best practice if a video is added to the Jumbotron block to always set a “Background Image.”
The background image can display very differently on mobile, so be sure to preview it before saving.
If the Desktop image isn’t well suited to the mobile screen size, the “Mobile Background Image” option is available.
View these steps in the video below:
Photo Gallery Block
When the photo gallery block (with a grid gallery layout) has 4 images and is displayed on mobile, 3 of the images are in line, but there is one photo that is pushed to the next line. This display causes the flow of the website to become choppy.
Best practice to avoid this from happening is to have separate gallery blocks for mobile and desktop, and then selecting to hide the relevant blocks.
For example, to display the gallery block (with a grid gallery layout) on desktop only with 4 images, this will require settings selections of 4 columns and the “Hide on Handhelds” button selected.
View how to do this in the gif below:
To display the gallery block (with a grid gallery layout) on mobile only, use only 3 images which will thus require settings selections of 3 columns and the “Hide on desktop” button selected.
Checkered Image and Text
Alternating image and text of multicolumn rows does not translate to the same format on mobile. The columns are stacked on mobile, which means the left-most content is put on top. When the multicolumn rows are set up in a specific way, layout issues can occur like placing the image blocks together in the mobile view, which now gives the user a wall of images before they get additional context.
To avoid this from happening, navigate to the Row Options on the row that needs to be flipped. Then, select the “Reverse the order of the columns. Only applies to mobile devices.” option and preview the changes to make sure it’s correct.
Platform Specific Element Settings
At every level in page building (Row, Column, Block), you can find options to make the element platform-specific ie the “Hide on Desktop” (shows on mobile only) and “Hide on handhelds” (shows on Desktop Only) buttons.
Only use these tools when necessary and make sure to leave a note of what you hid and label the row to define where it will show (Example Row Label: “About Us Desktop only – Multicolumn Row”)!
It is important to check the mobile layout after publishing a webpage on desktop to ensure no unexpected issues arise.
You can find other blocks that may need additional attention for a mobile friendly layout in the help page linked here.