Responsive Four Card Feature Section Using Flexbox And Media Queries
Design comparison
Solution retrospective
I'm just super proud that I figured it out. When I saw the design I was like no way I'm solving this one. I have no idea where to even start (with the desktop version that is). I mean I don't know how to position things like that. But I decided to start with the mobile version and just see how far I could get. And I think I did good.
My biggest mistake was almost finishing it, and then leaving it for a few days so when I came to finish it now I was really lost.
What challenges did you encounter, and how did you overcome them?The biggest challenge was the desktop version. The mobile version was fine. I didn't know how to make the colored top-border but that was easily googled. Positioning the boxes however was something else. My first instinct was to use CSS Grid, but I just couldn't figure it out. So then I tried Flexbox and when I found the property align-self the whole thing just worked itself out so that was nice.
What specific areas of your project would you like help with?I don't know. I guess I'd like to know if the challenge could have (should have?) been solved with CSS Grid? If that was doable then I'd also like to know how.
I'd also like to know what this means: "All page content should be contained by landmarks". I keep getting this as an error in my Accessibility Report and when I looked it up far as I could tell landmarks are elements that help with the structure and semantics of a page (like header, main, article, section etc.). But when I add those to try and fix the errors it doesn't change anything. So does anyone know what I'm missing?
Community feedback
- @DarkstarXDDPosted 8 months ago
- For this project you only need one landmark element and that's the
<main>. You can change your<div.outer-container>to be<main.outer-container>. Check this reference. - Yes, this would have been a perfect challenge to be done using the grid layout. Would have been much easier too. But nothing wrong with using flexbox either.
- I see you have created the title as two separate headings, using a
<h1>and<h2>. But it is just one single heading with just two separate styles applied for two separate lines. This is very important because currently when a screen reader user browsers this page, the screen reader will read that one heading as two separate headings, which can be confusing. What you can do is use a single<h1>and then inside that use a<span>tag to select second line of the heading and style it differently.
0 - For this project you only need one landmark element and that's the
Please log in to post a comment
Log in with GitHub
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