Step 4

Depending on your content, you may need to change the direction, justification, and alignment of items in the container. If there is a mobile icon next to the setting, you can easily make changes to the structure of the container without messing up the look on the desktop version. Sometimes changing the direction from horizontal to vertical will help the container contents display correctly on a mobile version.  

A lot of times, a more elaborate design won’t look right on a smaller device. When this is the case, the widget will need to be removed, or hidden, from the tablet and mobile versions of the site, as not all effects look good from each device.  

To make more complex changes, select a widget and go to the advanced tab. Then open the responsive settings.  

In the example below, you may decide the text on top of the background image is too hard to read on a smaller screen size, so you want to remove the image behind the text. Since the image is the background of the container, you can’t just delete the image without it also removing the image from the desktop view. Instead, you can turn the hide on tablet setting to the on position, which then hides the entire container on the tablet version.  

The content is still visible in the editor, but it is grayed out, which means it will not display when viewed from a tablet.  

You can hide containers or individual widgets that don’t look good on the tablet or mobile view, however, you don’t want to remove too much of your site from the tablet and phone versions. That content is usually important and still needs to be displayed on the site, so hiding the content is not an option. When you still need to display content, but have a different layout, you can duplicate the container and rebuild it for the tablet and mobile view. 

To duplicate a container or widget, right click on either a container or widget and select duplicate. If you cannot click on the container, unhide it first from the responsive settings to duplicate it. 

Place the new copy just under the original container or widget. Then, select the top (original) item and in the advanced responsive settings, hide it on a tablet and phone. In the new container/widget, go to the advanced responsive settings and set it to be hidden on the desktop.  

Now you can edit the new version of the container. This will allow you to create a whole new design that works better on a smaller viewport. In the example below, the container was duplicated, and the top container with the distracting background image hidden in tablet and phone views. The duplicate container was hidden from the desktop view and then changed from an image as the background to a solid color background, making the text more readable on a smaller screen. 

Another built in feature is the ability to change the order of items in a container. This is especially important when editing your designs for the tablet and mobile versions of your site. In the example, the heading appears above the image, which looks good on the desktop version of the site. However, it might look better if the heading appears after the image on the mobile version. 

If there are just two widgets in a container, you can easily reverse the order. To do this, select the first widget, which in our example is the heading, and go to the advanced tab. Next to order, you have the options to select start, end, or custom. If you change the order of the heading widget to end, it will reverse the image and heading in the container for the mobile view only.

Most of the time you will have several widgets within a container. If this is the case, you will need to custom order the widgets. In the example below, the desktop version of the site has a container with an animated headline, then a grid container nested within it, containing images and headings.

In responsive mode, the phone view reorders the widgets, placing the animated heading at the bottom of the container, with the images and headings out of order, as seen below. 

To move the animated heading to the top of the container, select the animated headline widget and go to the advanced tab. Select custom for the order, which looks like three dots stacked vertically. When this is pressed, an additional option appears below to type in a custom order. To move the animated heading to the top, give it the order of 1. This will move the animated heading to the top of the widgets on the phone view only. We know it will only impact the phone view since there is a mobile/phone icon next to the setting.  

Each layout is different and depending on the type of container and its settings, you may need to take additional steps to make the change. If you give a widget the custom order of 1 and it does not fix the order, you may need to examine your container structure and trying giving the container the widget is in the custom order of 1.  

While most of the time the custom order change is immediate, sometimes you need to give every widget in the container a custom order to see the change take place.  

In the example below, the animated heading was moved to the top when the custom order was changed to 1, but the other images and headings are still out of order.  

To fix this, each widget within the grid container needs to be given a custom order to display correctly. In the example below, the section displays correctly once each widget is given a custom order, moving from 1 to 7. 

Making responsive changes to a site is often a meticulous process. It takes time to rebuild, resize, and reorder containers and widgets to look good across all platforms. As you make changes to your site and optimize it for tablet and phone visitors, be sure to take the time to make each version of your site look good. The tablet and phone versions should not be afterthoughts without any interesting designs or lots of hidden content.  

You will need to open all your pages and posts to look at the automatic changes and make manual overrides. Don’t forget to look at the header and footer as well, in addition to your popups, all of which can be edited in the theme builder.  

Remember to start in the tablet view, and once you are happy with the entire site in tablet view, press the phone icon at the top of the screen to go through the site and optimize the site settings and design for a mobile phone.