Front page image placement and header alignment

[agjohnson]

Below 990px breakpoint, content reflows to a vertical display:

At tablet/mobile, similar issues:

Other options

• I think the reason it looks out of place is because it's an abstract flourish type of graphic. If it communicated more to the user, it would be fine. So a more applicable graphic is one option.
• Alternatively, just use a full bleed graphic behind the text/buttons
• We could hide the image/column on tablet/mobile viewports at least. This is the easiest option.

---

• [ ] Resolve issues with image placement
• [ ] And/or resolve issues with image scaling. Don't fluid scale out to the full display width on some tablet/mobile width.
• [ ] Resolve issues with text alignment

[nienn]

I'm +1 on hiding the image on mobile. There's no real reason to make the user scroll an extra screen. I also think that all of the elements on the above screen (posted print-screens) should become center-aligned on mobile.

SUI does not come with many options for responsive behaviour thought, so we might need some custom CSS. For hiding the image we can use the device only grid option, which requires adding complexity to the DOM structure but it works natively. There's no such options for centering the text on selected viewports.

[agjohnson]

Yeah, a reusable class would probably be best. There are several places on the marketing pages we want a heading left aligned on large displays and center aligned on small-medium displays.