responsive site designer row disappears mobile site

This creates a more consistent layout on mobile. You will notice that the third column is disabled on desktop and then enabled on mobile devices. Now go into the General Row Settings for the third row and check the box to disable the row on desktop. Next, we need to change the layout of our new third row to how we want the order of the columns to be on mobile.ĭrag the text module content over to the second column and drag the image module over to the first column. Now the second row will be hidden on mobile devices. Under General Row Settings, check to disable the row on phone and tablet. Using the Visual Builder, duplicate the second row.īefore we edit the new duplicated row, open the Row Settings in the second row. Then we need to create a different version of the second row to be visible only on mobile. With a few clicks you can hide or show sections of content on any device.įor this example, we need to keep the second row visible on desktop but hide it on mobile devices. Two Ways to Change The Column Stacking Order on Mobile 1: Changing The Column Stacking Order on Mobile Using Divi’s “Disable On” Featureĭivi’s “Disable On” feature allows you to create different versions of your content on phone, tablet, and desktop displays. With the current layout, the flow of content on mobile will stack in the following order:Ī better layout for mobile will be to change the stacking order of the columns in one of your rows so that you get a more consistent layout of content. This can cause a problem if you want to keep the flow of content consistent on mobile devices. This means that the first column of your row will stack on top of the second column. When shrinking the width of your browser to less than 980px wide (the breakpoint for mobile devices), the content of each row stacks from left to right. But it also creates a problem when the columns stack on mobile. On your second row (the duplicate row you just created), drag the image module over to the second column and drag the text module over to the first column.Īlternating the image and text positions on each row like this may be a creative and effective way to display your content on your webpage.

I’ve labeled the columns for you in the following image.įrom the visual builder, duplicate the row with the same 2 columns by clicking the duplicate row icon. Now you should have one row with 2 columns with the first row containing an image and the second row containing text. Under the General Text Settings, add your text to the Content text box. Next, insert a text module in the second column of your row. Under Image Settings, upload and insert an image.

On a new page, click to use the Divi Builder and launch the Visual Builder.įrom the visual builder, choose a 2 column (½ – ½) layout.Īdd an image module to the first column inside your row. The second way is to use custom CSS to add classes to your columns which designate their order on Mobile. The first involves creating an alternate version of the content specifically for mobile devices using the “Disable On” feature within Divi. Today I am going to show you two ways you can change Divi’s column stacking order on mobile Devices. In this case, you will need to change the order of columns to create a more consistent user experience on mobile.

But sometimes certain designs that look great on desktop create an inconsistent ordering of content on mobile. This makes sense and is usually what is needed for most websites. So if you have three columns on desktop, the left (first) column will be stacked first on mobile followed by columns 2 and 3 underneath. The columns are stacked in order from left to right. Divi is built on a responsive grid that stacks (or orders) your columns in a certain way when going from desktop to mobile displays.

Responsive site designer row disappears mobile site