Design comparison
Solution retrospective
I was able to make it responsive entirely using CSS grid, specifically grid-template-area. This is something I want to get more comfortable with and I think I learned a lot by playing around with it until I got it right. Next time I will be more carefully about how I structure things later. For example, doing mobile-first approach I knew it would work with flex so I did that first but later on I needed to change it to grid to make the hero section layout work. In the end it cost me time doing flex first. I need to think about the changes I will need to make later on and plan accordingly.
What challenges did you encounter, and how did you overcome them?It was hard to figure out the grid layout for the hero. Specifially moving the text content between the two images. I figured it out by playing around with it, going step by step.
I also had troubles with the text and sizing. The text wraps weirdly so that it has on word in the middle. For example:
Group Chat For Everyone
instead of: Group Chat For Everyone
how do I fix that?
What specific areas of your project would you like help with?I couldn't figure out how to move two images on the hero to the end of the screen so that they were cut off by the edge of the screen like the design without making a huge hap between them on mobile screens. How did you guys do that?
As usual, are there any redundencies in my CSS that I would fix?
How do you guys deal with sizing efficiently?
Community feedback
- @DepaulaeduardoPosted 7 months ago
About how to move two images on the hero to the end of the screnn I used a display flex, and then justify-content: space-between
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