How to make row layouts responsive

Here's how you can make different row layouts responsive on smaller devices (tablet and mobile).

The EE Builder has the following core responsive options built in:

• Breakpoints
• Stacking
• Spacing
• Visibility

These options are explained in more detail in the 'Responsive options available' article.

Making rows responsive

By default, rows will stack according to the device - but in some cases some layout changes may be required to improve the layout.

To make a row responsive on mobile or table we can use the EE Builder. Within a row you will see the responsive icon (Desktop icon) appearing in the following sections, allowing you to control the layout on different-sized devices:

Style Tab

• Height - If you have set a custom minimum height for a row you can also adjust the height on both tablet and mobile view when in the responsive edit mode.
• Border - You can control whether or your border is permanently visible on Tablet/Mobile.
• Background Image - If you have used a background image on the row you can control what alternative image should be shown on tablet/mobil. You can also control the image positioning and other settings just like you can in the Desktop view.

By default your style settings for other sized-devices will keep those you applied to the Desktop background. You can see from the settings (in the image above) that you have the option to replace an image in mobile view if you wish. This means you can select, say, a landscape image for Desktop view and an alternative/portrait image for mobile view.

Advanced Tab

• Margins - You can adjust the margin sizing for both tablet/mobile view which will override the auto global responsive styling.
• Padding - You can adjust the padding sizing for both tablet/mobile view which will override the auto global responsive styling.

Click here to read about how to adjust margins and padding - Controlling margins & padding on smaller device