Wider max-width

Pain point

Products using the standard GOV.UK page template sometimes find that content feels "squeezed" or "crampt", particularly on content-heavy application pages.

Another similar problem is that too much content has to be scrolled to be viewed by the user. This can make it confusing to switch between the context and the task needed.

Solution

One solution is to increase the maximum width of the page so that content has more room to breathe. This should be the first option tried in a product, it has very little to no impact on the "government" feel of the site.

If the problem still persists you can move to look at other proposed solutions in the congested content space.

Implementation

To increase the max-width of the screen you can add the following CSS to your project. This example uses a max-width of 1600px but you can choose one that suits your needs. You will have to update the margins to accomodate this new width. You should move to margin: auto 60px after the max width you have set.

.govuk-width-container {
    max-width: 1600px !important;
}

@media (min-width: 1020px) {
    .govuk-width-container {
        margin-right: max(30px, calc(15px + env(safe-area-inset-right)));
        margin-left: max(30px, calc(15px + env(safe-area-inset-left)));
    }
}

@media (min-width: 1660px) {
    .govuk-width-container {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}