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

Community feedback

• 

  Vee•240

  @JunasVeePosted over 2 years ago

  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

  1

  ---

  

  Kratos012•90

  @Kratos012Posted over 2 years ago

  @JunasVee Thanks a lot buddy. I ways to get everything picture perfect. Your advice makes me feel much more at ease with myself. Oooh yeah! about the attribution. I completely forgot about the absolute value. I spent hours trying to centre the main content perfectly to no avail. Finally gave up. lol. Thanks again for the feedback. Means a lot.

  NB: Yeah, if I use the img tag it works. But, the issue I face then is, I won't be able to blend it with the background colour.

  1

  

  Vee•240

  @JunasVeePosted over 2 years ago

  @Kratos012 Glad to hear it's helpful.

  If you still want to blend the image and obviously by not using the img tag, I guess the only solution that I've found from what I saw is to increase the container's width until how much you think it fits enough. if it doesn't work, probably it has something to do with the background image properties, but hopefully, it'll work. Keep going👍

  0