Design comparison
Solution retrospective
First attempt, not great, used Bootstrap, I need to learn Flexbox, right?
Onwards and upwards!!
Community feedback
- @mubizzyPosted over 2 years ago
Excellent job on this challenge! your report has a few issues though:
- 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 helpful0 - wrap everything in your body in
- @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 amax-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 of100%
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 helpful0@martinxoPosted over 2 years ago@elaineleung thank you so much for such a detailed response!
1 - @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 helpful0@martinxoPosted over 2 years ago@KaiPereira Hey, many thanks for the suggestion Kai, I'll check out the Zombies course, sounds fun!
0 - @vishalk2512Posted over 2 years ago
This comment was deleted over 1 year ago
0@martinxoPosted over 2 years ago@Vishalk2512 Thank you Vishal for the encouragement, I'll check out your solution and learn from that!
0
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