Submitted 2 months ago

Four_card_feature_section - Responsive Layout GRID & Flexbox - SASS

Gilbert• 290

@juliengDev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I was able to improve my understanding of media queries by using multiple breakpoints throughout the design integration process. I applied the responsive principles learned during the review of courses recommended by the platform.

What challenges did you encounter, and how did you overcome them?

I encountered challenges while implementing the desktop layout grid, particularly in adapting it across different breakpoints. Initially, maintaining consistency and alignment across various screen sizes posed difficulties. To overcome this, I systematically adjusted the grid layout using @media queries, ensuring each breakpoint preserved the integrity of the design while accommodating different device dimensions. This iterative approach allowed me to refine the grid’s responsiveness effectively, achieving a cohesive layout experience across all targeted devices.

What specific areas of your project would you like help with?

please let me know if there is anything I could do better on this one. Thank you for reviewing my code. :)

Community feedback

juliusalberto• 220

@juliusalberto

Posted about 2 months ago

It's good! The grid and positioning are top notch, however the code is a little bit too hard to read due to it having so many lines :(.

I really like the fact that you have a personalized design for tablet. Nice attention for details there!

I would recommend refactoring the scss and reducing the number of lines. From a quick skim, I can notice several things:

See that the .item1, .item2, .item3, and .item4 code is all similar? I think you can try to create a base style and extend it to each item (or include a style for each item).

It is good overall! I learnt a lot through reading your code! Nice one!!

Please log in to post a comment

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