Creating Responsive Designs in WordPress

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.

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.