Made it responsive using media query, flex-boxes and order.

Solution retrospective
- I had difficulties with font-size. Choosing the correct/appropriate font-size is extremely difficult for me.
- I also had lot's of issues with layout, what units to use, How to scale the background image to fit perfectly into a container/box . I ended up using vh for the height.
Well, I'll appreciate some feedback from you guys. Thanks I've still got a ways to go.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @JunasVee
Hi Kratos012!
Congrats on finishing this challenge, I gotta say that your solution looks clean and almost perfect. I'll kick this off by answering your inquiries:
-
I know that this challenge tells you to make the solution looks as close as possible to the example design and probably it includes the font-size, but when it comes to a real-life situation, what actually matters are its readability and its suitability with the web design. This might be a bit off the box but trust me, it would be more useful once you achieve something in this field.
-
px unit is good when a page is made for a single specific viewport and defines the height or width of an element. Most developers use Relative Units such as rem and em for font-size, vh for page's height, and vw for page's width. I personally use % for margin and padding to make it responsive. To fit this particular image, I guess it'd be better to use the img tag instead, I've tried it, and actually worked, additionally, you can make the container's width wider.
My Feedback:
- Somehow you made the image looks better and more comfortable to the eyes by blending the background color to it, great job.
- It seems like the attribution affected your main content's position by pushing it up from the center point. To give the attribution an independent position, set its position to absolute so that it won't affect any other elements.
The rest is pretty much well done. I hope my feedback is helpful.
Marked as helpful -
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