Skip to content
Submitted about 3 years ago

Order summary component

Amanda Talle•40
@atalle
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

Hey fellow FEDs!

I struggled to implement my background pattern. Does anyone know how I can get the background image to stretch full width (on desktop)? I tried background-size: cover which did not work. Thank you!

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted about 3 years ago

    Hey, awesome work on this one. The layout is good in desktop the mobile as well, though there is little issue on the scaling on the mobile layout, since right now the elements is being hidden by the screen, creating a scrollbar.

    Abhinay already said a quick fix on your background-image problem. Just to describe how it fixed it, the first argument, the 100% works on x-axis and the auto is for y-axis. So 100% on x-axis, takes the whole width, thus making the image fill all the width.

    Some suggestions:

    • add some padding to all the sides of the body tag to prevent the content from touching the sides of the screen.
    • alt text on the image could be left empty because it is just for decoration. If an image is for decoration purpose only, it would be wise to left their alt empty. As well as on the music icon, the alt could be empty.
    • when making website, make sure to have main element. That is landmark element that helps screen reader to navigate properly on a website. Screen readers are assistive tech that people uses to use a website.
    • the annual plan text along with the price below it could be wrap in a single h2 element. On this one, you are using h3 tag which is correct, since it is a heading tag, but remember to use heading tags incrementally by one. What I mean is that, for example, using h1 and h2 and h3, but not using h1 and h3. Use only heading tags by one level.

    Other than those, great work. Though on the mobile layout, that horizontal should be fixed :>

    Marked as helpful
    0
    Amanda Talle•40
    @atallePosted about 3 years ago

    @pikamart Thank you for taking the time to share this feedback! I've added a main tag, updated the H tag, removed the alt text on decorative images, and tried to fix the experience on mobile (the mobile view via dev tools looked okay, but when I pulled it up on my phone, I noticed the scroll bar you mentioned! Not okay!)

    Thank you for sharing these best practices with me!

    1
  • Abhinay Gunjal•85
    @AbhinaygunjalPosted about 3 years ago

    You can use background-size: 100% auto; for the background to stretch it to the end.

    Marked as helpful
    0
    Amanda Talle•40
    @atallePosted about 3 years ago

    @Abhinaygunjal Thank you!

    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