Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive four card feature using flexbox and grid

#styled-components

@justEfere

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please do anyone know how to position element so when you increase the parent width size the individual cards width also increase. Please let me know, thank you.

Community feedback

@snehamoybag

Posted

Hi @justEfere, 🙋‍♂️

Congratulations on completing this challenge! 🎉 You did a great job on the layout, it looks great! 👏

You can use percentage units to give relative size to the children 😄

<div class="container">
   <div class="container-item"></div>
</div>
.container {
    width: 100px;
}

.container-item {
    width: 50%;
}

This will make the .container-item to be 50% of its parent. So if you change the width of .container, the .container-item's width will also change.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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