Submitted about 2 years ago

Responsive four card feature using flexbox and grid

styled-components

Efere Precious•580

@justEfere

A solution to the Four card feature section challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Snehamoy Bag•600
@snehamoybag
Posted about 2 years ago
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

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