Mobile-first recipe page solution using Flexbox
Design comparison
Solution retrospective
- What other reset css properties should I add?
- Is the markup of the HTML clear enough or did I add a lot of "div"'s?
- Could I add a more generic HTML tags/CSS properties?
Community feedback
- @danielmrz-devPosted 9 months ago
Hello @alonsovzqz!
Your project looks great!
I have one suggestion for you to improve it even more:
- Using
padding
is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:
π Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; /* Use when the whole project fits inside the screen */ display: flex; /* it works with grid too */ justify-content: center; align-items: center; }
In this case, due to the length of the element, you might need to use
margin
at the top and bottom.I hope it helps!
Other than that, great job!
Marked as helpful0@alonsovzqzPosted 9 months ago@danielmrz-dev Thanks so much! In this case I think I followed the "code" Figma provided so I went for it. But now will try with your solution and from now on I'll just not try to look too much into Figma's code.
And I really appreciate the cheers!
1 - Using
- @asishPatnaik2000Posted 9 months ago
Hi, some resets I constantly use is for all elements I make the elements border-box
*{ box-sizing: border-box }
what it does is considered the border, margin, etc. defined by you is also considered for size of an element making the UI more consistent. If you don't add this border size and an elements width are calculated separately for an element. What you can also do is make image as block elements so when adding image in UI doesn't have its default inline behavior and takes entire block space. This is optional only if you need it, you has add, for me it helped to get more control over inline elements like img element
Learn more about resets from here:
Hope this helps
Marked as helpful0@alonsovzqzPosted 9 months ago@asishPatnaik2000 Thanks for the input I really appreciate it. I was looking for something pretty basic, since in the internet I found something close to what the link you provided but wasn't entirely sure that will cause any weird behaviors on the page but now with the link you proveded I have a better understanding about what the reset CSS does. And now I know I was wrong π but thanks for the help
1 - @believer-danishPosted 9 months ago
Use display:block with every <img> element because margin property is not respected in inline elements.
1
Please log in to post a comment
Log in with GitHubJoin 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