Setting margins and padding for tablet/mobile devices

When designing a page in EE Builder by default you'll do so in Desktop view, but often you'll need to adjust margins and paddings for rows, columns, and modules for tablets or mobile devices. This article will show you how to adjust these settings individually for each device type (desktop, tablet, mobile).

1. Access the settings of the row, column, or module you'd like to adjust the margins or padding settings for. This can vary, as accessing the settings differs between rows, columns, and modules.
   1. For rows and modules, you'll access the settings by clicking the wrench icon.
   2. For columns, you'll click the 'split square' icon to drop down the column menu. From here you'll click 'Column Settings' to access the immediate columns settings. In some cases, you'll have columns nested within another column. In these cases, you'll see an option in the drop-down that says 'Parent Column Settings', which you'll click instead if you're wanting to adjust the parent column.
2. Once you've clicked to open the settings a modal pop-up window will appear with several tabs. To adjust the margins and/or padding you'll click the 'Advanced' tab at the top of the window.
3. From within the advanced tab, depending on what you're adjusting the settings for, you'll see adjustment options for either Margins, Padding, or both. By default, you should be entered into the Desktop view, which will be identified with an icon resembling a desktop computer.
4. Clicking the Desktop icon will change the icon to a Tablet icon, and clicking the Tablet icon will change it to a Mobile icon, allowing you to make adjustments that would only reflect devices detected as having the chosen screen size.  You'll also notice that EE Builder itself will reflect a change, giving you an idea in the builder what the outcome of your changes will appear like on that device.
5. Once you've selected the appropriate device by clicking the icon next to (or above) the fields you'd like to adjust for it, you may now change these fields to reflect that changes you'd like to make. This works in the same way as you would for Desktop. Make your edits and when you're done click the 'Save' button.
6. You may now change the view in EE Builder back to Desktop by clicking the Mobile icon again.

That's it! You've now made changes the reflect device types directly. This will allow you to customise how your page will appear on various devices.