Add CSS assignment - responsive profile page - #4
dianadenwik wants to merge 1 commit into
Conversation
| max-width: 100%; | ||
| } | ||
|
|
||
| @media (min-width: 600px) { |
There was a problem hiding this comment.
Well done one making mobile-first!
| #contact-form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1rem; | ||
| width: 20rem; | ||
| } |
There was a problem hiding this comment.
As required, you used flex in the contact form. Well done!
| :focus-visible { | ||
| outline: 3px solid #6366f1; | ||
| outline-offset: 3px; | ||
| border-radius: 4px; | ||
| } |
There was a problem hiding this comment.
Well done in the accescibility approach!
| @media (prefers-reduced-motion: reduce) { | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| transition-duration: 0.01ms; | ||
| } | ||
| } |
| display: grid; | ||
| grid-template-columns: 2fr 1fr; | ||
| gap: 2rem; | ||
| padding: center; |
There was a problem hiding this comment.
According to padding documentation, center value is not possible. How would you change it?
| img { | ||
| border-radius: 50%; | ||
| width: 10rem; | ||
| height: 10rem; | ||
| max-width: 100%; | ||
| } |
There was a problem hiding this comment.
All img are receiveing this format. Which means that all images are going to be a circle. How would you apply this only for the avatar?
| .contact { | ||
| grid-column: 2; | ||
| border-left: 1px solid #ccc; | ||
| padding-left: 2rem; | ||
| background-color: #9fa480; | ||
| border-radius: 5%; | ||
| padding: 2rem; | ||
| padding-top: 4rem; | ||
| } |
There was a problem hiding this comment.
You have 3 properties of padding. Line 88 is not being executed because line 91 override this.
There was a problem hiding this comment.
And contact form only has a background in Desktop view. For mobile and tablet this formatting is not being applied
| button[type="submit"]:hover { | ||
| background-color: #4c3f02; | ||
| } |
There was a problem hiding this comment.
When you hover the button, the text became dark. Consider to change also the font color.
rafasilpereira
added
Reviewed
2 participants
No description provided.