AI Launch 2023 - Skinny banners - #51415
Conversation
still needs copy
moving into their own PRs
will be merged separately
| @media screen and (max-width: $width-sm) { | ||
| padding: 1em 1em 0.5em; | ||
| height: unset; | ||
| } |
|
|
||
| @media screen and (max-width: $width-sm) { | ||
| width: 50px; | ||
| margin-right: 1.5em; |
There was a problem hiding this comment.
Is this supposed to work in right-to-left languages? If so, avoiding margin-right in favor of something more directionally agnostic (like gap) is preferred
There was a problem hiding this comment.
Ooo TIL 🙀 — just updated!
There was a problem hiding this comment.
Nice! You can "force" the page to render right-to-left by changing the dir tag in the HTML to rtl. When I first did that for the catalog page, I had to change like 7 things 😬
There was a problem hiding this comment.
Haha! Thanks for sharing the knowledge, adding to my notes doc 🙌
|
|
||
| @media screen and (max-width: $width-xs) { | ||
| width: 100%; | ||
| text-align: center; |
There was a problem hiding this comment.
nit –– can you leave off text-align since it's defined on 57?
There was a problem hiding this comment.
This is overriding the text-align: left for tablet and mobile since it needs to switch to center again on extra small mobiles screens — this screenshot is 320px:
megcrenshaw
left a comment
megcrenshaw
left a comment
There was a problem hiding this comment.
Excited about the png file getting smaller! This looks great –– just left some small style nits but nothing blocking. Well done!
mgc1194
left a comment
mgc1194
left a comment
There was a problem hiding this comment.
Awesome changes. I really appreciate that the new strings are already i18n, and avoiding the use of right/left margins in favor of direction-agnostic properties.
3 participants
Add skinny banners on the following pages to support the launch of TeachAI and the updated https://code.org/ai page:
Shown using the
teach-ai-launch-2023DCDO flag.Related PRs:
Jira ticket: ACQ-528
Desktop:
Tablet:
Mobile:
