Improve placement of mobile CTA

[angela-tran]

The mobile CTA and header (within the white box) looks a little low--the hero image feels like it's taking up a lot of real estate, causing the user to have to scroll to see the full context for the page. In the Figma boards the white box starts about midway up the Visa CC (instead of at the bottom)

Possible to move the box/header/CTA up? Expected behavior would be the user can see the CTA button without having to scroll.

Originally posted by @srhhnry in #1206 (comment)

[thekaveman]

Removing from the SacRT milestone so we aren't blocked there, this was an existing bug.

[machikoyasuda]

@srhhnry What kind of parameters or logic should there be for the height of the home page on Mobile?

Here are some proposals of design logic options:

1. Set the vertical height of the home page to never scroll. The whole page (the top nav, main content section and footer) should all fit in the vertical height of the mobile browser at all times.

iPhone 12 mini, iPhone SE vertical

2. Another option: set the vertical height of the home page to scroll only for the footer links. Parts of the whole page (top nav and main content section) should be set to the vertical height of the mobile browser, and then the footer will scroll.

iPhone 12 mini, iPhone SE vertical

iPhone SE horizontal

Note: This will cover up more parts of the background image. Image position could be tweaked a little vertically so the image starts in a different position, like this - position moved up 20px to bring the card up higher

[thekaveman]

@machikoyasuda do you have some time to follow up on this one? Maybe it's a simple fix we can it in for the SacRT release?

[srhhnry]

Sorry everyone! I just got a notification and realized I hadn't responded. If there's a time crunch either of those two options is fine. My preference would be option 2--scroll to the footer (based on the smaller screens having more of the hero image available). Both of those options work though, so this preference is not a blocker.