Submitted 9 months ago

Order Summary Component using HTML, CSS

Malgorzata Stano• 70

@gosiast

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

UPDATE: thank you for the help, It fixed the issues and answered my questions :)

// I struggled to use the border: radius to the top of the 'card' element. How can I fix that?

I learned that I need to pay attention to the parent-child element.

Can someone help me how to insert a screenshot into the README file?

Thanks for the feedback! :)

Community feedback

Arshad Ali Kaldane• 650

@IamArshadAli

Posted 9 months ago

Hello There! 👋

Congratulations on completing this challenge. 🎉

I've some suggestions that might interest you. 💡

use overflow: hidden; on your .card, it will take care of the overflowing image, and the specified border-radius will be applied to the card.
you can add a screenshot into the readme like this ![alt text](./src/images/screenshot.jpg) or this <img src"./src/images/screenshot.jpg" />

Hope this helps you. 👍

Happy Coding 🤓

Marked as helpful

Malgorzata Stano• 70

@gosiast

Posted 9 months ago

Hi! @IamArshadAli :) Thanks a lot for your help! Fixed now! :)

Do you know why the screenshot solutions break my "change" link? I checked, and it looks correct on my machine.

Thanks and have a nice day!

Arshad Ali Kaldane• 650

@IamArshadAli

Posted 9 months ago

Greetings @gosiast The challenge's screenshot provided to us are captured at a width of 1440px for desktop and 375px for mobile screens. So, it's important to pay special attention to these screen sizes.

You might have a display with a screen resolution of 1920x1080 or something else, which is why the design looks perfect on your machine and breaks in the screenshot, as the screenshot mechanism looks for our design at 1440px width.

You might want to consider simulating your screen using the developer tools of your browser. Most of the browsers follow the same path to access the developer tools i.e. options > more tools > developer tools or you can simply use the following key combination Ctrl (or Cmd) + Shift + I.

Then set the dimensions of the screen to the desired size and you are good to go.

Hope this helps. Thank you🤓

Marked as helpful

JimTK16• 370

@JimTK16

Posted 9 months ago

Hi, i think you only need to set border radius for the top container, in this case is the order--wrapper. You can do something like this {border-radius: 2rem; overflow: hidden}. The overflow: hidden is to keep the image from overflowing the container, and help to reveal the top corners. To insert images to readme file you could do a quick search about insert images in markdown.

Hope it helps.

Jim

Marked as helpful

Malgorzata Stano• 70

@gosiast

Posted 9 months ago

Hi! @JimTK16 :) Thanks a lot for your help! Fixed now! :)

Do you know why the screenshot solutions break my "change" link? I checked, and it looks correct on my machine.

Thanks and have a nice day!

JimTK16• 370

@JimTK16

Posted 9 months ago

Hi @gosiast, Your site looks nice on big screens. However, you need to also design for small screens as well. I suspect that they captured your solution screen when it's on a small screen, and it makes the 'Change' wrap to the next line due to lack of space. You can use media queries to adjust the layout and size of different elements on different screen sizes. Here a link to my code for an example : https://github.com/JimTK16/order-summary-component

Marked as helpful

Please log in to post a comment

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