I have a form wizard, which looks like this:
On this particular step, you are supposed to pick only one of the three items. On the desktop version buttons "Next" and "Back" are fixed to the bottom of the page, so there are always visible. However on mobile, they are replaced by a button to show a summary of an order.
As you can see, when each card contains any text, they don't fit on a single screen, so user can't see the navigation buttons.
I see two solutions to this problem:
a) Automatically go to the next step, when user picks one of the items. I'm afraid that they might not be sure what did they pick or pick something by accident and then struggle to get back.
b) Upon selecting one of the items, if the buttons are not in viewport, smoothly scroll the screen to reveal the buttons. This way user has a chance to change his choice, without thinking how to get back and he is sure what he picked (the card changes its color), by confirming his choice explicitly clicking "next".
Which one of those two are more intuitive? Maybe there is a third one?
After a good night sleep I've found a third way. So I have moved the summary button to the top nav, which freed the space for the navigation buttons on the bottom. Let me know which feels better: