Submitted over 2 years ago

Order Summary Component [Bootstrap + BEM + Flexbox + SASS]

Yash•130

@yashviradia

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi Everyone! My name is Yash and this is my solution for this challenge. 👋

To speed up the process of this challenge I started off with Bootstrap 5 🚀 and for further detailing Flexbox was used.
To keep code as dry as possible sass was also used.

Any feedback on how to improve my design or code are welcome! 🙂

Community feedback

Luis paz•390
@PazispeacePosted over 2 years ago
I will try to answer in order

How do I make card image take width of complete container?

First of all your container has padding

@mixin make-container($gutter: $container-padding-x) { width: 100%; padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter}); padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter}); margin-right: auto; margin-left: auto; }

Your image, indeed, is taking that 100%, but because of your padding, it doesn´t seem like is taking all that space.

To solve that, get rid of the padding you are giving to the class container. If you want your elements to be centered, enclose your content (excluding your image) in a container and use margin and padding as needed on your content container
Marked as helpful
1

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