Skip Navigation
Buy Now
Home » Course lessons » Creating Responsive Designs in WordPress

Creating Responsive Designs in WordPress

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.

Desktop design

Mobile phone design

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:

  1. Check how the page looks on different screen sizes.
  2. 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.

Changing the font options for the phone screens
Changing the font options for the phone screens

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.

Editing a Toolset Grid block options for phone screens
Editing a Toolset Grid block options for phone screens

Click between any two columns to resize them. You can set different column sizes for different screen widths.

Setting the 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.

Adjusting the gap between columns
Adjusting the gap between columns

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.

Adjusting a Toolset block's margins and paddings for phone screens
Adjusting a Toolset block’s margins and paddings for phone screens

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.

The Grid block's Reverse Column option
The Grid block’s Reverse Column option

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.

The option to hide a Toolset block on screen sizes of your choice
The option to hide a Toolset block on screen sizes of your choice

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.

Toolset shows you subtle icons for all hidden elements
Toolset shows you subtle icons for all hidden elements

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 

Adjusting the Grid Settings for the View block

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.

Toolset settings for customizing the responsive breakpoints

If you are not familiar with responsive breakpoints it’s best to leave the default values.

Dario
Updated
November 16, 2020
Send feedback to our documentation team