Using design features in mobile view

The cover page design functionality is a great way to make striking landing pages which stand out in character and aesthetics.

Padding and margins are as great way to tweak the overall layout of a page, but we recommend they are used sparingly, and with best practices in mind.

This is due, in part, to the varied display between desktop and mobile views.

On the right, there is a cover page design which displays without any glaring issues.

The design configurations for this cover page can be found here.

Having looked at the configurations on the above link, you will notice instances of negative (eg -100) paddings and margins. To achieve this aesthetic, I have had to use both horizontal and vertical negative paddings to position the bottom two featured tiles (newsletter, videos) directly underneath the above two (latest news, our blog).

This is bad practice and will likely lead to issues when viewing the page in mobile view.

On the right is a screenshot of that same page, in mobile view. The layout starts off fine, but quickly descends into a chaotic mess, particularly when the configurations of the tiles with extreme cases of negative margins come into focus.