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

simple card component built with html, css grid and flexbox

@webdevhill

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


Hello frontendmentor.io coders,

The provided background .svg for desktop is only 1440px. On xl screens, it obviously does not span the device's screen. There are resources for expanding the SVG view box but that seems beyond the parameters of the style guide. Any opinions on style guide parameters and expectations or solutions for extra large screens?

Thank you

Community feedback

@asbhogal

Posted

Hi Jeffrey,

This is great work - well done!

To handle the background images they should ideally be placed in a <picture> element in your markup, with paths to the mobile and desktop versions which change respective to a specified viewport width. I've added a link here from MDN detailing this and how to implement it Link

Also, locally host your Google Fonts for privacy and performance reasons. Here's a good video explaining why and how to achieve this Link

Hope this helps!

0

@webdevhill

Posted

@asbhogal

Hello and thank you for your time and recommendations. I am hosting the fonts locally. I believe they are implemented according to best practices.

live

repo

I have not been able to position the background .svg as a <picture> element. I am honestly not sure how to write the html?

Thank you for any help you can provide with using the <picture> element as a background.

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