Responsive designs automatically adjust to the different screen sizes of different devices. Toolset provides you with everything you need to build fully responsive designs inside the WordPress Block Editor.
Example
The following images display the difference between our own homepage here on Toolset.com when viewed on a desktop and mobile phone.
As you can see, on mobile phones, we display the content in only one column. We also adjusted the font size for the main heading.
How-to Steps
Want to make your sites responsive, so that they look great on any screen size? Follow these simple steps:
- Check how the page looks on different screen sizes.
- Scroll down this page for a list of common issues and their solutions.
Text elements are too big or too small?
When you edit any block coming from Toolset you will see the screen size selector for each styling option including typography, colors, and more. This allows you to fully control the appearance of any block for different screen sizes.
So, if you need to adjust the size of the text output by a Toolset block, expand the Typography section in the right sidebar, select the screen size, and change the font size.
Columns are too narrow on phones?
While several columns fit nicely on a desktop screen, on phone screens, typically only one column will fit. Use the Toolset Grid block to completely control the columns in your designs. You can use it for simple columns and for complex grids.
Click between any two columns to resize them. You can set different column sizes for different screen widths.
Content in columns appears too close?
Click to select the Toolset Grid block and use the options in the right sidebar to control the gap (space) between columns and rows.
Too large margins and padding?
You can adjust the margins and paddings for any Toolset block and for any screen size. Select the block, expand the Style Settings section in the right sidebar, and select the screen size you want to adjust the settings for. Now, tweak the margins and paddings to your liking.
Images appearing after the text instead of before it?
Sometimes, your designs feature floated images next to the text. However, on smaller devices, the texts and images might display in the wrong order.
You can use the Grid block’s Reverse Columns feature to control when “floating” images appear on phones.
Need to hide big images on phone screens?
Your designs might use fancy but large images. While they look great on a desktop, they often don’t contribute much value on phones. You can hide any element, including images, on different screen sizes.
To hide an element, select it and expand the Advanced section in the right sidebar. There, you will see the Hide element toggle.
Switch to the target screen size on which you don’t want to show an element and hide it.
Toolset will show you a reminder icon for hidden elements. This way you won’t forget them and can unhide it at any time if needed.
How can I control a View’s grid output?
The features of the Toolset Grid block are also available when you create Views. The new grid layout makes your Views look great on narrow screens.
Select the main View block and expand the Grid Settings section in the right sidebar. You will
Setting custom responsive breakpoints
To set custom responsive breakpoints for your site go to the Toolset → Settings page and scroll to the Responsive web design breakpoints for Toolset Blocks section.
If you are not familiar with responsive breakpoints it’s best to leave the default values.
Related topics
- Displaying Images with Toolset
- Styling Custom Searches
- Styling a Site Header and Footer
- Styling Views and Archives
- Styling Single-post Templates
- How to Design and Choose Images and Illustrations
- Choosing and Applying Colors in Your Site
- Using Typography for Better Website Readability
- WordPress Site Identity
- Where a WordPress Sites Design Comes From
- Adding Custom CSS to Templates, Archives and Views
- YouTube Videos with Advanced Options
- Styling Front-End Forms
- Creating a Hero Section
- Adding Dynamic Content to Your Homepage
- Creating Responsive Columns and Grids
- Advanced Styling with Container Blocks
- Display Content Conditionally