Desktop design<\/strong><\/p>\n<\/div>\n\n\n\n Mobile phone design<\/strong><\/p>\n<\/div>\n\n\n\n <\/p>\n<\/div>\n<\/div>\n\n\n\n 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.<\/p>\n\n\n\n Want to make your sites responsive, so that they look great on any screen size? Follow these simple steps:<\/p>\n\n\n\n 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.<\/p>\n\n\n\n So, if you need to adjust the size of the text output by a Toolset block, expand the Typography <\/strong>section in the right sidebar, select the screen size, and change the font size.<\/p>\n\n\n While several columns fit nicely on a desktop screen, on phone screens, typically only one column will fit. Use the Toolset Grid <\/strong>block to completely control the columns in your designs. You can use it for simple columns and for complex grids.<\/p>\n\n\n Click between any two columns to resize them. You can set different column sizes for different screen widths.<\/p>\n\n\n Click to select the Toolset Grid block and use the options in the right sidebar to control the gap (space) between columns and rows.<\/p>\n\n\n You can adjust the margins and paddings for any Toolset block and for any screen size. Select the block, expand the Style Settings <\/strong>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.<\/p>\n\n\n Sometimes, your designs feature floated images next to the text. However, on smaller devices, the texts and images might display in the wrong order.<\/p>\n\n\n\n You can use the Grid block’s Reverse Columns <\/strong>feature to control when \u201cfloating\u201d images appear on phones.<\/p>\n\n\n Your designs might use fancy but large images. While they look great on a desktop, they often don\u2019t contribute much value on phones. You can hide any element, including images, on different screen sizes.<\/p>\n\n\n\n To hide an element, select it and expand the Advanced <\/strong>section in the right sidebar. There, you will see the Hide element <\/strong>toggle.<\/p>\n\n\n Switch to the target screen size on which you don\u2019t want to show an element and hide it.<\/p>\n\n\n\n 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.<\/p>\n\n\n The features of the Toolset Grid block are also available when you create Views<\/a>. The new grid layout makes your Views look great on narrow screens.<\/p>\n\n\n\n Select the main View <\/strong>block and expand the Grid Settings <\/strong>section in the right sidebar. You will <\/p>\n\n\n![\"\"](\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/02\/toolset-blocks-desktop.png\")
<\/a><\/figure>\n<\/div><\/div>\n\n\n\n<\/a><\/figure>\n<\/div>\n\n\nHow-to Steps<\/h2>\n\n\n\n
Text elements are too big or too small?<\/h3>\n\n\n\n
<\/a>Columns are too narrow on phones?<\/h3>\n\n\n\n
<\/a><\/a>Content in columns appears too close?<\/h3>\n\n\n\n
<\/a>Too large margins and padding?<\/h3>\n\n\n\n
<\/a>Images appearing after the text instead of before it?<\/h3>\n\n\n\n
<\/a>Need to hide big images on phone screens?<\/h3>\n\n\n\n
<\/a><\/a>How can I control a View’s grid output?<\/h3>\n\n\n\n