Design comparison
Solution retrospective
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Community feedback
- @correlucasPosted about 2 years ago
Hello Alex, congratulations for your solution!
I'll propose you a
grid
exercise to create this component the easiest as possible. The best way to build this component with two columns is by usingGRID LAYOUT
since it is simpler to manage the columns and then create the media query for mobile. Hereβs the steps to create it withgrid
create the main block to hold all the content (you can use<main>
to wrap), set itswidth
asmax-width: 900px
(it's the container size) anddisplay: grid
/grid-template-column: 1fr 1fr
(this means that your component will have two columns with 50% of the container width each thats 450px).Then to create the mobile version, all you need to do is to change the container flow vertically with
grid-template-column: 1fr
.Try this approach and you'll never want to use flex to create layouts, just to manage content.
Hope this helps, happy coding π
0@Alexr6667Posted about 2 years ago@correlucas Hi Lucas,
Very much appreciate your reply.
I did try to use
grid
but I think I need to practice some more. I couldn't get the outcome that I was looking for. After spending a lot of time working on thegrid
approach, I decided to useflex
in the end as I have a lot more experience usingflex
so decided to just go with this approach.I plan to try a few playgrounds and work on my grid work to become more comfortable with this.
I will try your solution when I have some free time as I to feel like
grid
would have been a much better approach.1 - @DavidMorgadePosted about 2 years ago
Hello Alex, congrats on finishing the challenge! almost got a pixel perfect!
I tried to replicate your bug but its not happening to me, I added this structure:
<section class='card'> <div class='container'> content </div> </section>
And still works the same as with no container div, could you explain further or replicate the bug and upload it to github? Now curiosity is killing me about a flex getting column without specifying it!
0@Alexr6667Posted about 2 years ago@DavidMorgade Hi David,
I think I worked it out. I think maybe I was putting the
display: flex;
on the card instead of the container which for some reason forces everything into a column. I guess this is because I was adding the css class to the parent of the parent and not the direct parent.Thank you very much for you reply and looking into it for me.
1
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