darryncodes• 6,430
@darryncodes
Posted
Hi Matthew this is an awesome article discussing the mobile-first approach.
I really like your solution, I think you have nailed it - with a few tweaks it could be perfect:
- there is a typo in your box-sizing declaration:
box-sizing: border-boxxw; - i would update the background-image declaration to:
background-size: 100% auto;and removebackground-position: 0 -15rem;also remove the image at mobile view to closer match the design - you could look at using the
:hoverpseudo-class to help you match the hover/active states in the design. Here is some information and some button hover styling - your design could do with some white space. If you add some padding to the card and div's inside the card it would really help it breathe. Something to look out for is the
gapproperty for flexbox, it's experimental now but will make life a lot easier when it get's more support - you could centre your design nicely in the viewport if you remove the
paddingto your<body>. I think you misseddisplay: flex;so add that with youralign-itemsandjustify-contentdeclaration along withmin-height: 100vh;flex-direction: column;
All the best with it all,
Any questions give me a shout!
Marked as helpful
1
Matthew Van Pelt• 575
@Mattvp21
Posted
@darryncodes Thanks for the feedback and for helping me deal with that background image! I fixed the issues.
Thanks,
Matt
0
