Move continue button to below the pricing summary #2101
Conversation
https://eaflood.atlassian.net/browse/IWTF-4379 https://eaflood.atlassian.net/browse/IWTF-4380 Pricing summary appears beneath green button. This means that if a user doesn't scroll down, they will miss them and may not know the licence price to make an informed decisions until further into the journey. This may result in a user clicking back and forth through the journey rather than proceeding smoothly through.
|
| #continue { | ||
| position: absolute; | ||
| top: auto; | ||
| bottom: 0px; |
| .govuk-grid-row { | ||
| position: relative; | ||
| padding-bottom: 75px; | ||
| } |
There was a problem hiding this comment.
These styles are fine, but they'll require far more testing effort than if you confined them to only the pages they're needed on - i.e. the licence type and licence length pages. To do this we can use the :has pseudo-class:
.govuk-grid-row:has(.payment-summary-wrap)
This will only target the #continue and .govuk-grid-row elements on pages where the payment summary exists, which is exactly what we want. The :has pseudo class is supported by mobile browsers released in 2022 and 2023, so well within Grade B support. Realistically, there will be those with old smartphones stuck on old versions of Android or iOS that don't offer support to this selector, but they'll regress gracefully to the version where the prices display beneath the continue button. We should check this with the PO after QA to see whether it's acceptable to do this.
https://eaflood.atlassian.net/browse/IWTF-4379
https://eaflood.atlassian.net/browse/IWTF-4380
Pricing summary appears beneath green button.
This means that if a user doesn't scroll down, they will miss them and may not know the licence price to make an informed decisions until further into the journey. This may result in a user clicking back and forth through the journey rather than proceeding smoothly through.