@Mazz100
Posted
Hi @clintt-09. Good job with finishing the project. some things I could help with is
** On CSS**
-
.flex which is your main tag you could add
align-items:centerandjustify content:centerto have your design in the middle. -
Add
min-height:100vhin body to maximize the content to the full viewport height. -
You can remove the
width:85%because you already have youmax-widthdefined.
That's all I can suggest from my end. Keep in mind you can play with the devtool and debug your code live. Hope I could help. Happy coding :)).
Marked as helpful
@eghosaclinton
Posted
@Mazz100 Thanks for the tip.
- I usually don't set heights for any element in my HTML because it messes with responsiveness at times...plus I follow a mobile first approach, that is why I set width to be 85% (for small screens) even with a max-width set. This avoids the main component from getting too big as the viewport grows.
Nevertheless, thanks for the feedback!
@Mazz100
Posted
@clintt-09 You are welcome. We help each other out. Thanks for the width tip. I will experiment with it in my future projects, but in my approach to mobile layout, I usually get the maximum width desired, then add an extra all-around margin of the container to have more space around corners. I suggest you still add the minimum height to the body as well as justify and align the content so the design will be exactly in the middle. Try it, and good luck.
