Responsive settings for section settings

[kevincrafts]

Sections need to have additional settings for mobile and tablet breakpoints. Having only a single setting for something like spacing or a background image can cause the section to not display properly when viewed at a different breakpoint.

Spacing

There should be a set of spacing fields for mobile and tablet so spacing can be adjusted if necessary. Setting a spacing of '200px 50% 200px 0' on the desktop could lead to display problems with the content is viewed on a phone.

Background Images

There should be a media reference field for mobile and table so images can be changed if necessary. Sometimes a landscape oriented image might work fine for a desktop display, but when viewed on a mobile device the content is now much longer and the image needs to be portrait oriented instead.

Example: Here's a screenshot of a desktop view with a section and a landscape oriented background image with spacing to put the content in an empty area of an image:

Here's the mobile view of that page:

Rather than add an additional 8 spacing fields, I'd recommend simplifying the fields to a single field for each breakpoint: mobile, table, and desktop that would accept a value such as '100px 0 100px 33%' or '200px 25%' for example. These fields should also accept negative values.

[jcsparks]

This has migration implications. Backlogging for now.