Responsive Testimonials Using Grid and FlexBox Css
Solution retrospective
I’m most proud of my dedication to achieving my goal of mastering CSS Grid in order to build responsive layouts. For this specific project, I went beyond just desktop and mobile layouts by also designing a smartphone-specific version, which really challenged and improved my design thinking.
Looking ahead, I want to dive deeper into more complex layouts and advanced React projects. My ultimate goal is to compete on global platforms like Upwork and establish myself in the international market as a skilled front-end developer.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was designing specifically for smartphone screens. Initially, I believed that using a CSS Grid setup like grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) would make the layout fully responsive across all devices. However, I realized that when certain elements span multiple rows and columns, this approach alone wasn’t enough—especially on smaller screens.
To address this, I learned that media queries were essential for fine-tuning the layout. Ultimately, I resolved the issue by applying grid-column: auto !important; to each element, ensuring they adapted properly within the grid on smaller viewports.
What specific areas of your project would you like help with?I would like help with better aligning the content inside each element to maintain balanced spacing. I used Flexbox for layout, but I faced an issue: when I set justify-content: space-between, cards with smaller content ended up with a large gap between the header and the description, which didn't feel user-friendly.
When I switched to justify-content: flex-start, the content aligned at the top, but it didn't match the intended design, which expects a more balanced and centered feel within each card. I’m looking for better techniques or best practices to handle this situation, especially for cards with different content lengths.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@dar-ju
Hi Shikur!
I'll try to answer your question.
If you look at the design layout, you can see that there is approximately the same distance between the author block, the title and the quote. So we define a common flex block, arrange the column and specify a fixed gap, inside we have 3 elements. Before doing this, remove ALL the margins that these elements have, including -20px. Negative indent values should be used in extreme cases, in 99.9% of cases you will not need them.
In such cards there will always be more content somewhere, less somewhere. The fact that one card is completely filled, and the other has free space at the bottom is normal.
I would like to draw your attention to a few things:
- in a screen resolution of 1150-1200px, for some reason only the last card is shrinked and by 1150px it is very thin. It would be better if they all were shrinked.
- 768-1100px it would be better if the same card at the bottom was the full width of the screen
- I see in the code !important in the project that you write yourself and you have access to the files !important should not be used. Let's say you need to edit someone else's project and you do not have access to the css file, only to the html, then you can't do without this modifier.
Everything else is great, good luck with your development!
Marked as helpful
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