-
Notifications
You must be signed in to change notification settings - Fork 12
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Center content on desktop #186632607 #4444
Changes from 6 commits
7d30429
b8444e5
0891dcf
a9849a4
6f2463f
43e090f
7b6a6ae
8e3ddad
7f2926c
aa7d8aa
f60804c
40619a4
541dc46
1ffc8ae
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -407,11 +407,6 @@ | |
} | ||
} | ||
|
||
.landing-page-content { | ||
padding-left: 1rem; | ||
padding-right: 1rem; | ||
} | ||
|
||
.partner-logo-wrapper { | ||
display: flex; | ||
align-items: center; | ||
|
@@ -608,6 +603,28 @@ | |
text-decoration: none; | ||
} | ||
|
||
@media screen and (min-width: $tablet-up) { | ||
.question-layout .question-wrapper { | ||
margin: 0 auto; | ||
max-width: 658px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. All questions pages now have their content a little bit wider and centered |
||
} | ||
.question-layout.landing-page-outer .question-wrapper { | ||
max-width: none; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Landing page content has a logo and is wider - let it fill the main element |
||
|
||
.landing-page-container { | ||
display: flex; | ||
.fyst-home-image { | ||
width: 273px; | ||
height: 250px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Adding definite sizes here prevents annoying reflow as the image is loaded. |
||
} | ||
} | ||
} | ||
} | ||
@media screen and (max-width: $tablet-up) { | ||
.landing-page-container .fyst-home-image { | ||
display: none | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hide the logo on smaller screens |
||
} | ||
} | ||
} | ||
|
||
$state-colors: ( | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Adding a css class here that is dependent on the page allows us to do outer layout specific rules for each page |
||
<div class="grid"> | ||
<div class="grid__item question-wrapper"> | ||
<%= yield :notices %> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -46,4 +46,5 @@ | |
</h2> | ||
<% end %> | ||
</div> | ||
<%= image_tag 'questions/welcome.svg', class: 'fyst-home-image' %> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Landing page now has an image on it |
||
<% end %> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed this because the layout of the landing page is fundamentally changing