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 order summary component using flexbox and Sass

Joseph. 120

@josr13

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I stretch the background image's SVGs? They only look good on 375px & 1440px (I followed the design size).

Community feedback

Muhammadh 1,140

@Mr-jaw

Posted

Hello there 👋

Congratulation on completing the challenge

To answer your specific question How can I stretch the background image's SVGs?

⨳ If you see in the images folder, you'll see there are two background files. one for desktop and one for mobile. The thing is you have to change them using media queries.

⨳ But if you want to stretch the image that you have used you can try adding background-size: contain; or background-size: cover;. Still, I'd strongly recommend using media queries to change between the images that are provided.

Here is a tip to improve best coding practice 🙂

  • It is a good practice to use CSS custom properties. learn more about it here

I hope this was helpful

HAPPY CODING

0

Joseph. 120

@josr13

Posted

@Mr-jaw Hello. I did use different SVGs for each media query. Thank you.

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