Submitted about 1 month ago

Responsive four card feature section using sass, grid and flex-box lay

MAGENE Sem Joel• 300

@Jomagene

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'm proud of effectively using Sass mixins and variables to streamline my CSS, making it more modular and reusable. I also successfully integrated CSS Grid and Flexbox within media queries to create responsive layouts that adapt seamlessly to different screen sizes. Additionally, I'm proud that my implementation closely matches the original design.

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

One of the main challenges was maintaining responsiveness while preserving the design's integrity across different screen sizes. I addressed this by combining CSS Grid and Flexbox within media queries. I also used Sass mixins to ensure consistent top-line styles across elements. Achieving the perfect box-shadow and spacing required some trial and error, but iterating on my SCSS setup helped me get it right.

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

I'm seeking feedback on optimizing my responsive design, particularly in combining CSS Grid and Flexbox effectively. Additionally, I'd appreciate advice on maintaining clean and efficient Sass code, especially with mixins and variables. Insights on refining box-shadow properties for a more polished look would also be helpful.

Community feedback

Jan• 160

@Negligence

Posted 26 days ago

I love how you've replicated the design almost perfectly 🙌🏻.

With regards to the feedback you were seeking, try looking up the grid property on mdn, it might help you streamline things.

Here's how I used it in this project in particular:

.cards__container {
  gap: rem(30px);
  grid: 
  "    .    t    .    "
  "    s    t    c    "
  "    s    k    c    "
  "    .    k    .    "
  ;
}
.supervisor__card {grid-area: s;}
.team__card {grid-area: t;}
.karma__card {grid-area: k;}
.calculator__card {grid-area: c;}

This is just MY personal preference though, I'm not sure if this is what you were looking for 🤣

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