Skip to content
Submitted about 3 years ago

Order summary card using HTML5, CSS and BEM

Alejandro•100
@thealexgonzo
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

Hi everyone,

Here is my first challenge. I really enjoyed working on it and would greatly appreciate as much feedback as possible.

The one component I struggled with the most was the background wave image, I wasn't sure how to introduce it and eventually settled on including it as a background-image in the CSS file. I did find it difficult to adjust it properly to the layout and I'm not entirely happy with how it turned out, I think it could have been done a lot better, I'm curious to know what your thoughts are on my solution for this particular element, and what you would have done differently -->

.bg-image { position: absolute; background-image: url(images/pattern-background-mobile.svg); background-repeat: no-repeat; background-size: 100%; z-index: -1; width: 100%; height: 100%; }

There's two problems I have with it so far:

  1. How it looks on the desktop view: I don't think it matches the design perfectly nor does it on the mobile view to be fair.

  2. How it looks on mobile devices: when I viewed the completed design on my iPhone 8, annoyingly I could move the screen up and down and this ruined the design as the card was static on the centre of the screen with blank space above or below as I moved it.

Please do let me know if anyone had the same problems or what your solution would be for this.

** I also viewed the finished design on a larger iPhone 11 and again it looked way off because the viewport was vertically a lot larger which left blank space on the top and bottom.

Community feedback

  • hardy•3,660
    @hardy333Posted about 3 years ago

    That is a very impressive solution for the first time, design look almost the same as the design files Good job.

    For your wave background you did quite good job implementing it, one thing you can change is not to use additional element for background image just use background-image property on body element or container element. that way there is no need to position image container absolutely and thing like that.

    background-size: 100%; is useful property and it is good you used it, but on mobile screen sizes background has problem it becomes very small on height, to fix that you could use background-size: 100% 50%;

    Marked as helpful
    3
    Alejandro•100
    @thealexgonzoPosted about 3 years ago

    Thank you for your feedback, I've implemented the changes and it looks a lot better now and the code is a lot cleaner too. Thank you! @hardy333

    2
    hardy•3,660
    @hardy333Posted about 3 years ago

    @thealexgonzo You are welcome

    3
  • Carlos Guzman•285
    @guztrilloPosted about 3 years ago

    Hey Alejandro, great Solution. Seems nice and pretty sweet to me. About the second problem that you are facing:

    The viewport unit vh doesn't work very well on mobile device. That's because the top or bottom bar from the multiple mobile browsers. So, when you go to your site it scrolls because it cannot calculate the proper viewport due this bars. There's a couple of alternatives to this, and recently they are testing new viewport units design specially for mobile browsers( large, small, and dynamic viewport units). You can search more about this.

    I hope this help you.

    Marked as helpful
    1
    Alejandro•100
    @thealexgonzoPosted about 3 years ago

    Thank you for your feedback Carlos, greatly appreciated. @guztrillo

    0
  • Fluffy Kas•7,715
    @FluffyKasPosted about 3 years ago

    Hey, I think your solution looks great! Your background seems fine on my pc, although there's an easier solution for it. You could simply use background property on the body and add both the color and the image, comma separated, then set the background-size to contain. No need for an additional wrapper div and absolute positioning in this case ^^

    There are a few other small things I noticed:

    1. Incorrect alt texts: I suggest reading this article to understand what alt texts do: (https://axesslab.com/alt-texts/).

    2. Your button uses the browsers default, don't forget to change it.

    3. You could swap the outer section for main, I think that would get rid of the issues in the accessibility report.

    Overall, it looks really good though. And congrats on completing your first challenge!! :)

    Marked as helpful
    1
    Alejandro•100
    @thealexgonzoPosted about 3 years ago

    @FluffyKas Thank you very much for your feedback, its been very helpful. Look forward to learning more from you with the other challenges :)

    0
  • Darshan Pandya•420
    @Darshan-Pandya10Posted about 3 years ago

    Hey alejandro , Great Design. Looks great on both pc and mobile view. Happy Coding :)

    1

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