If you find that your website is not responsive on mobile devices it can be a pain to make it look responsive, without effecting the desktop screen sizes. Thankfully those most common WordPress website builders have this in mind so you can create mobile-specific styling.
To edit mobile view without affecting desktop you have to change its style specifically for that size. Depending on what builder your using, you can do this in the elements settings by selecting and editing the element.
How to edit mobile view without effecting desktop
Mobile-specific styling with WPBakery
Hiding Columns
In WPBakery you can hide columns specifically only on mobile or desktop screen sizes. This is handy if you want to reduce the amount of content on mobile to simplify your website for mobile users. To do this edit the column by finding the pencil icon above the column with your row element.
Once you edit the column it opens a popup of the columns settings specifically just for that column. As you can see in the screenshot below, you can find visibility options based on the screen size under the Responsive options tab. You can toggle to hide the column by checking the box under the devices sizes row to hide/show on any screen size.
With WPBakery, you cant hide/show an entire row based on specific screen sizes. If you do want an entire row to hide on mobile , you have to mark it to hide on mobile for each column to do so. If you are comfortable using CSS, its handy to setup a mobile-hide class you can put onto the column to make make hiding the row on mobile easier.
Other mobile-specific styling
Unfortunately, WPBakery doesn’t really provide any other user-friendly ways to specifically style your page on certain screen sizes. Sometimes themes that are built with WPBakery can take it further by adding features like making the Design options tab have different styling based on the different screen sizes. If you do need to make more mobile-specific styling like font size changes or spacing changes, then you will have to use custom CSS, outlined later in this post.
Mobile-specific styling with Elementor
Elementor is the most mobile styling friendly WordPress builder out there. With Elementor you can alter the majority of most CSS styles based on screen size. From anything like font sizes, paddings, and colors – Elementor can style it all depending on screen size.
Hiding Columns or elements
Hiding columns (or any element!) based on screen size is super easy to do with Elementor. Start by selecting the column you want to customize and then on the left side panel click on the Advanced tab. From there find the Responsive dropdown to find the options to enable/disable the visibility of the column or element on that size. Customize your option, hit save changes and you’re good to go! This works for columns or any element in Elementor, which is handy for really getting mobile the exact way you want.
Changing all other styles (font size, colors, spacing, size)
As touched on before, with Elementor you can change any style of an element based on screen size. Some things you can changed based on size include:
- Visibility
- Color
- Background color
- Margins
- Padding
- Size
- Text align
- All typography styles
- Background image
- Animations
- Border styles
- Box Shadow
- and more
To edit any or multiple of the style types above first select the element you want to customize and then find the style you want in the left panel. Next, to the right of the style label there should be a laptop monitor icon – once you click on the icon you can select the screen size.
When you change the size, you then are customizing all the options for that size. This means that when you click (lets say) the mobile icon, all the setting values are now for mobile, and not only for that element. You can think of it as all the settings changing to tablet or mobile mode, depending on what size you have selected.
When you don’t see the screen size icons/dropdown next to the style you want to customize, this means that that style is not supported to be customized size-specifically.
Cant select the element you want to customize?
With Elementor you may find that are some elements on the page that are not customizable like the header and footer. This is because those elements you are trying to edit, are to be edited somewhere else. This is because those elements are meant to be similar across all pages. So having a single spot to customize those repetitive elements makes sense, instead of being able to edit it across all pages. These are the most common kind of elements that are not selectable on your average page:
- Header
- Footer
- Elementor Forms
- Any shortcode elements
- Elementor templates
To edit those elements you need to find specifically where they are customized located somewhere through your WordPress menu. I’d love to tell you where to go directly, but with most WordPress Elementor themes the locations to edit those elements differ quite a lot making it hard to set you in the right direction.
Mobile-specific styling with custom CSS
You may need to use CSS to get the job done. If you do, you would use media queries to only style elements on specific screen views. If you don’t know or are uncomfortable with CSS, you can learn about CSS.
Style paragraphs to be blue:
p {
color: blue;
}Style paragraphs to be blue ONLY on mobile:
@media only screen and (max-width: 769px) {
p {
color: blue;
}
}It’s common to use the number 769 (of pixels) to determine if the screen size is mobile or not. For tablet size, it’s between 769 (mobile) and 1024 pixels. Any size above 1024 pixels is considered either a desktop screen size or a laptop screen. You can further read more on media queries if you wish to learn more.
The differences between desktop and mobile
Sizing differences
On mobile, it’s common for sizes of elements to smaller. Font-sizes are one of the most important size differences to consider when optimizing for mobile because the typical font size on the desktop does not suit a smaller screen. Make sure all the elements are appropriately sized and readable by checking how your website looks on your phone.
Content differences
Should content be different on different screen sizes? In my opinion, the answer is no. Content should not have to change, hide or show just to be mobile responsive, If you are then your website visitors are just not getting a similar experience from device to device, which is not a good thing. You want your website to offer the same information on any size. If you find an element cant be styled to fit a mobile size, then completely restyle the element by making it look different – but never hide it! Hiding valuable content on mobile is never a solution, its another problem!
Feature differences
Your website should not have to sacrifice features just to fit the mobile size. If you do this, your mobile visitors are getting a lesser experience than desktop users. When 51% of websites are viewed with a mobile device, this just isn’t acceptable. Some widely known websites are doing this, at the expense of their users. For example, with Instagram, you can’t make stories on a desktop computer. This detracts from the desktop Instagram experience, forcing you to use the app. Which isn’t a positive user experience.
Things to look out for when making mobile responsive
Not all browsers are created equally
Your website most likely won’t display exactly the same across every browser. This is because they are made differently and support different CSS styles. The same issue happens with the mobile versions of the apps, and even worse so. Opera Mini, is one of the most unsupported browsers out there, not supporting dozens of CSS styles that the are other browser apps do.
Remember to check your website on all the main browsers on mobile like Chrome mobile, Firefox mobile and Safari mobile to ensure your website looks normal across those apps.
Mobile simulation on desktop is lying to you
If you think you’re smart by not having to pull out phone by using the mobile simulation feature with Chrome, you have been warned.
As nice as this feature would be, it unfortunately just isn’t accurate and doesn’t display the website as if it were actually the mobile device. The tool may miss anything from styles being supported, to sizes of elements being off.
Be sure to actually check your website on a mobile device to see if is working as intended.
Don’t forget to not effect the desktop size
The whole point of this post was to show you how not to affect the desktop size, but styles may have gotten through or reset during your mobile responsivity process so be sure to check all the sizes to see if your website is looking as intended.
