Conversation
|
✔️ Deploy Preview for sb-apprentices ready! 🔨 Explore the source changes: 11dd67c 🔍 Inspect the deploy log: https://app.netlify.com/sites/sb-apprentices/deploys/61ba1023915fe70009aa70ce 😎 Browse the preview: https://deploy-preview-33--sb-apprentices.netlify.app |
auaruss
force-pushed
the
chisel--apprentice-qualities
branch
3 times, most recently
from
fa9a990 to
63c925b
Compare
changangus
force-pushed
the
chisel--apprentice-qualities
branch
4 times, most recently
from
28b548b to
ed5f735
Compare
| &__main { | ||
| margin: auto; | ||
| @include horizontal-section-spacing(); | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
This is looking great Alice, I think I figured out a simple way to stop the text from floating off to the right on larger screens.
Could we add this CSS to &__main?
justify-content: right;
max-width: $max-content-width + ($xlarge-screen-padding * 2);
margin: auto;
☝️ Setting the max-width this way feels a bit hacky, but absent a bigger refactor to the DOM structure, it it's a simple way to account for the padding with border-box setting.
| &__main { | ||
| margin: auto; | ||
| @include horizontal-section-spacing(); | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
This is looking great Alice, I think I figured out a simple way to stop the text from floating off to the right on larger screens. Here's a screenshot for reference:
Could we add this CSS to &__main?
justify-content: right;
max-width: $max-content-width + ($xlarge-screen-padding * 2);
margin: auto;
☝️ Setting the max-width this way feels a bit hacky, but absent a bigger refactor to the DOM structure, it it's a simple way to account for the padding with border-box setting.
jonoliver
left a comment
jonoliver
left a comment
There was a problem hiding this comment.
Thanks for the updates Alice! Nice work!
- adjust spacing to match other sections - adjust background position in tablet view - update snapshot FSA21V2-164
auaruss
force-pushed
the
chisel--apprentice-qualities
branch
from
bd7a6e1 to
11dd67c
Compare
3 participants
Description
chisel: fix initial spacing and styling for apprentice-qualities component
Spec
Design
See Story: FSA21V2-164
To Test
npm run test:ci[For an example of good validation instructions, check out Bryan's Bouncy Ball PR.]
Validation
The following has been completed by the developer:
Browser Testing
Gold Level Browsers
In these browsers, all content is accessible and design matches exactly. In most cases, bugs should be resolved before merge.
macOS
Windows
Mobile
Silver Level Browsers
In these browsers, all content is readable, but design may be inaccurate.
Windows
Mobile
Bronze Level Browsers
In these browsers, our only goal is content readability.
Windows