Center content on desktop #186632607 #4444
Conversation
|
Heroku app: https://gyr-review-app-4444-538371ef0edb.herokuapp.com/ |
| padding-left: 1rem; | ||
| padding-right: 1rem; | ||
| } | ||
|
|
There was a problem hiding this comment.
Removed this because the layout of the landing page is fundamentally changing
| @@ -46,4 +46,5 @@ | |||
| </h2> | |||
| <% end %> | |||
| </div> | |||
| <%= image_tag 'questions/welcome.svg', class: 'fyst-home-image' %> | |||
There was a problem hiding this comment.
Landing page now has an image on it
| @@ -5,7 +5,7 @@ | |||
| <%= yield :form_question %> | |||
| <% end %> | |||
|
|
|||
| <section class="slab question-layout"> | |||
| <section class="slab question-layout <%= controller_name.gsub("_", "-") %>-outer"> | |||
There was a problem hiding this comment.
Adding a css class here that is dependent on the page allows us to do outer layout specific rules for each page
| @media screen and (min-width: $tablet-up) { | ||
| .question-layout .question-wrapper { | ||
| margin: 0 auto; | ||
| max-width: 658px; |
There was a problem hiding this comment.
All questions pages now have their content a little bit wider and centered
| display: flex; | ||
| .fyst-home-image { | ||
| width: 273px; | ||
| height: 250px; |
There was a problem hiding this comment.
Adding definite sizes here prevents annoying reflow as the image is loaded.
| max-width: 658px; | ||
| } | ||
| .question-layout.landing-page-outer .question-wrapper { | ||
| max-width: none; |
There was a problem hiding this comment.
Landing page content has a logo and is wider - let it fill the main element
| } | ||
| @media screen and (max-width: $tablet-up) { | ||
| .landing-page-container .fyst-home-image { | ||
| display: none |
There was a problem hiding this comment.
Hide the logo on smaller screens
tofarr
force-pushed
the
center-on-desktop-#186632607
branch
from
9211c6e
to
541dc46
Compare
2024-04-12 Last release of tax season 2024 * Send reject resolution message on 4/13 and 4/22 for clients that have been notified of rejection and not yet been accepted (#4479) * Update GYR banner for closing season (#4473) * Always showing download button after April 25 #187355990 (#4481) * Post-Deadline notification (#4475) * Pre-Deadline notification (#4469) * truncate 3rd party designee name (#4462) * Change logic for Reminder notification (#4447) * Close fyst #187355990 (#4472) * Fix submission and skip flaky tests #187278919 (#4468) * Refine AZ excise credit #186927846 (#4418) * pre-populate w2 info (#4457) * Center content on desktop #186632607 (#4444)
Given the complexity of CSS rules, I tried to make my changes as limited as possible - using media rules to limit them to larger screens.
General questions sections are slightly wider than before and centered...
And the landing page now has a logo...
Mobile layouts should be unaffected..
