In my last video, I showed how to create complex layouts in WordPress using the block editor. One of the most common concerns about using the block editor for layouts is that while everything looks great on a desktop browser, making it look good on mobile can be a challenge. There are definite issues when trying to get complex desktop designs to work well on mobile, here’s my approach to Mobile Fix for Complex Layouts in the WordPress Block Editor…
In this video, I tackle how to fix those issues using only the block editor and a little help from the browser. We will not be editing core theme files to create custom style sheets or breakpoints. Instead, I show how to make adjustments using the block editor interface. While we will write some CSS, it will be done through the browser inspector and style editor, then pasted directly into the block editor to keep everything simple and manageable without modifying any theme files.
Understanding How a Block Theme Loads
Before making any fixes, it is important to understand what happens when a block theme loads in the browser. Every block theme includes a theme.json file. I have created a playlist on this channel that dives deep into theme.json settings and styles, which you can check out via the link on the top right of this video.
When the theme is loaded, the theme.json file is applied with a core set of settings and styles. If some settings are not explicitly defined in the file, WordPress merges the default core values into it.
There are two main ways to customise these settings and styles:
- Global Styles
- These allow changes across the entire site. When saved, they are stored in the database and override settings from the theme.json file.
- Block Level Settings
- These are styles adjusted directly in the editor on the right side when creating content. These changes are saved as part of the page content and are mostly applied as inline styles.
Inline styles have the highest precedence because they are applied directly to HTML elements. The order of priority is:
- The theme.json file is loaded first
- Any missing defaults are merged from the core theme.json file
- Global styles saved to the database override any existing styles
- Block level settings applied in the editor take precedence over everything else
Now that we understand this, we can effectively address mobile layout issues.
Addressing Mobile Issues
The first step is to go to the view menu and switch to mobile view. This allows a quick preview of how the site appears on smaller screens. The first noticeable issue is a gap down the left and right sides of the screen. The block editor includes extra space to display the inserter, which is necessary for editing purposes. Because of this, the block editor’s mobile view should not be relied upon for a fully accurate representation of the site. The best way to check how a site looks on mobile is to view it directly in the browser using the inspector.
The first issue to fix is the spacing on the left and right sides. By default, a group block has padding applied. If it is not set in the theme.json file, it will inherit from the core theme.json file. To remove the padding and allow content to reach the edge of the device, select the group block in the settings, adjust the padding to zero, and save the changes. Refreshing the front end should remove the unwanted space.
Fixing Horizontal White Space
The next issue is the horizontal white space. On the desktop version, a margin is applied around elements. As the screen size is reduced, this margin does not shrink to zero. Inspecting the element shows that a margin is set using a CSS min function. To remove it, identify the class applying the margin and target it using a media query with a max width of 480 pixels. Adding a rule to set margin top to zero and using the important rule ensures it overrides the default styling.
Fixing Negative Margins
Another common issue is negative margins when columns stack on mobile. The desktop version might have overlapping elements using negative margins, but this does not translate well to mobile. To fix this, target the class responsible for the negative margin and set it to zero inside a media query.
Adjusting Cover Blocks for Mobile
Some designs use background gradients that do not work well on mobile. The best way to fix this is to target specific cover blocks and change their background from a gradient to a solid colour. To do this, go to the block editor, add a custom class in the advanced settings of the cover block, and use CSS to change the background.
Saving Changes
Once all adjustments are made, the final step is saving the changes. Copy the custom CSS, navigate to global styles, and paste it into the additional CSS section. Saving it ensures the styles are stored in the database and applied consistently across the site.
Final Thoughts
Testing on an actual mobile device is the best way to ensure the layout looks correct, as the block editor and browser emulators may not always provide an accurate preview. This method of fixing mobile issues in the block editor avoids modifying theme files and keeps everything within the WordPress interface. While further refinements could be made, these techniques offer a solid foundation for handling mobile layout challenges effectively.
If you have any questions, leave them in the comments. If you found this useful, consider liking and sharing the video. If you have not subscribed yet, now is a great time. Thank you for watching and I will see you in the next video.
Leave a Reply