Skip to content
Submitted 4 months ago

Four_card_feature_section - Responsive Layout GRID & Flexbox - SASS

Gilbert•360
@juliengDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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
    @juliusalbertoPosted 4 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:

    1. 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!!

    0

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