This section looks great on desktop, but how does it hold up on smaller screens? Use the device switcher at the top to switch to tablet.

Oof. Not great. Don't worry though, this is an easy fix. Use the breadcrumbs to select the "hero-content" box with the 2 columns. Next, break the row by clicking the vertical dashed line between the box items.

The text is too close to the image above it now. That's because styles inherit from larger devices and in this case, the outer spacing on desktop is set to 0 px.

Luckily, values set in tablet mode will override desktop values, not replace them. Override the outer spacing above the heading to 40 px.

If you ever need to remove an override, you can click the "×" to clear it for the current device.

Now, switch to mobile mode to finish this up. The text looks too big on mobile but don't worry, that's another easy fix. Simply reduce the font size.

Text styles in content mode can be overridden just like any other style and they can also be cleared just like any other style. Always look for the "×".

Now you just need to tighten things up. Hover over the empty space, or use the breadcrumbs to select the "hero-bg" box. You can adjust the top and bottom spacing here visually, which will override this just for mobile.

You should be good to go now, but double-check the other devices to make sure.

Pro-tip: To switch between device sizes you can press 1 on your keyboard for desktop, 2 for tablet, and 3 for mobile.

Did this answer your question?