Design comparison
SolutionDesign
Solution retrospective
I was unsure of how to create the mobile view, I think I sort of got it right but some of the placements were off. Also, I couldn't get the correct font. Flexbox was also a problem for me. I kinda got it to work but I have to look at more examples.
Community feedback
- @lpzisaiasPosted over 1 year ago
You did a good job despite the drawbacks you mention! Some recommendations:
- It is good practice to start with mobile views first.
- With flexbox, put in the body tag, min-height: 100vh; to center the elements.
- To use Google fonts, go to the file link and first select the font and its weight, once selected (click on the "+" button to select) copy the generated code in the header of your html file, example:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">And below it generates the css code to use:
body{ font-family: 'Roboto', sans-serif; }- Finally You can try flex-direction: column and row for mobile and desktop view
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord