QR Code

Community feedback

• 

  mubizzy•1,520

  @mubizzyPosted over 2 years ago

  Excellent job on this challenge! your report has a few issues though:

  1. wrap everything in your body in <main> or use semantics

  2.   it is a best practice to use both HTML 5 and ARIA landmarks to ensure all     content is contained within a navigational region.

  Hope it helps:)...don't forget to mark it as helpful 👍

  You can get more details here...click here

  Marked as helpful

  0

  ---

  

  martinxo•20

  @martinxoPosted over 2 years ago

  @mubizzy thank you!

  0
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi @martinxo, great first attempt, and yes, do learn Flexbox! Bit of a hurdle at first, but you'll find that it's practically what modern day responsive design largely depends on. I highly recommend Kevin Powell's YouTube videos on Flexbox.

  I see that your component has a rather extended white background, which is quite different from the design, so just some quick suggestions here:

  (1) On your .col selector, you have a max-width of 100%, which is saying to the browser to go all out, which is why on large screens at 1440px, the .col is stretching out to match the width of the parent container, even though the image isn't that wide, which explains all that white space. What you want to consider instead is the width of the image, so instead of a value of 100% try something closer to the max width of the image, e.g., 25rem, and make sure there's no extra white space on the side aside from padding.

  (2) To center your image horizontally after the change above, add margin: 0 auto; to .col.

  (3) If you want to center your image vertically as well, what you can do is in the .row div (I see you got flexbox there), add the following and see what happens:

  align-items: center;
  min-height: 100vh;
  

  This basically means if this selector as a min height of the viewport height, then align the children to the center of the axis. By the way, it looks like the flexbox isn't really doing much in your code right now because even though you got a flex-wrap on the parent, you only got one child element, which means there really isn't anything to wrap (no burritos here unfortunately). You'll see that it won't make a difference if you remove that property. If you add the lines I suggested above, you'll see flexbox starting to function.

  Good luck, and welcome to Frontend Mentor!

  Marked as helpful

  0

  ---

  

  martinxo•20

  @martinxoPosted over 2 years ago

  @elaineleung thank you so much for such a detailed response!

  1
• 

  Kai Pereira•240

  @KaiPereiraPosted over 2 years ago

  Good job Martin!

  I would highly suggest learning the bare bones of CSS before you move onto a UI library because it is important to learn the reigns of CSS! If you want a nice course on Flexbox you can learn a gamified style at Flexbox Zombies https://mastery.games/flexboxzombies/

  Pretty good job with it though! Keep on staying with it!

  Marked as helpful

  0

  ---

  

  martinxo•20

  @martinxoPosted over 2 years ago

  @KaiPereira Hey, many thanks for the suggestion Kai, I'll check out the Zombies course, sounds fun!

  0
• 

  Vishal Vansjariya•120

  @vishalk2512Posted over 2 years ago

  This comment was deleted almost 2 years ago

  0

  ---

  

  martinxo•20

  @martinxoPosted over 2 years ago

  @Vishalk2512 Thank you Vishal for the encouragement, I'll check out your solution and learn from that!

  0