Well done, this looks pretty good when I preview on mobile. But the CSS needs a lot of changes I'm afraid...
Here are suggestions for you
- sign up would navigate somewhere so should be an anchor not button
- your css is near impossible to read. Follow standard formatting conventions - one property per line 3)Never ever write font size in px
- you should have no widths or heights in this, only a max width in rem on the component
- always use a modern css reset at the start of the styles
- you should be working mobile first with the styling. Mobile styles should be the default in this
- the component needs some space around it so it can't hit the sides of the screen. You can do that with padding on a wrapping element or margin on the component
- Do not nest css selectors like this when you don't need to. CSS becomes a nightmare to manage on larger projects if you don't keep the specificity low/flat. It's a very bad sign of you're needing to use
!important - the order of css really matters too. It should be mobile styles for a selector, then media query overriding the specific properties that need to change
- media queries must always be defined in rem or em not px. There's an article about this on the same site I shared above
Marked as helpful
1
