Skip to content
Submitted over 1 year ago

simple card component built with html, css grid and flexbox

Jeffrey Hill•100
@webdevhill
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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

  • Aman Singh Bhogal•1,010
    @asbhogalPosted over 1 year ago

    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
    Jeffrey Hill•100
    @webdevhillPosted over 1 year ago

    @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

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