Updated CSS to match COP page with figma design #1455
Conversation
There was a problem hiding this comment.
Looks good to me. Will wait for @daniellex0 to look over it.
There was a problem hiding this comment.
This looks really good!
Just a couple edits if possible:
-
In desktop view, the slack icon in the slack blurb isn't aligned with the paragraph above it- I think a fix for this might be giving .alert-communities the property max-width: 450px (but make sure this looks good for all viewports etc)
-
In mobile view: I'm sorry this wasn't in my original issue because I forgot, but would it be possible to add this? The paragraph in the header should be max-width 300px. Also this might mess up the alignment of the slack blurb on mobile, so can you please make sure it is still somewhat left-aligned with the paragraph?
Thank you!!
|
Thank you @daniellex0. Will add these changes and prettify the page! |
|
@Aveline-art just wanted to say, @ me and Danielle when this is ready for another review! |
|
Updated! Note: I've also recently moved my directory to improve my docker performance. The commit changes seems to be correct, but please view a copy on your device to make sure that is the case! iphone6/7/8 Plus vertical (414x736) Laptop (1280x950) |
Fixes #1326
Adjusted scss file according to #1326 for the purpose of matching Figma design
Current site, for reference
Figma design, for reference
Screenshots of updated site, below, in various resolutions
@daniellex0 Is this acceptable or would you like additional adjustments beyond the actions items in #1326 to better match the Figma design?
Mobile Android
GalaxyS9 vertical (360x740)
GalaxyS9 horizontal (740x360)
Mobile iphone
iphone6/7/8 Plus vertical (414x736)
iphone6/7/8 Plus horizontal (736x414)
Tablet
ipad vertical (768x1024)
ipad horizontal (1024x768)
Laptop
Laptop (1280x950)
Laptop HD (1920x1080)
