Submitted about 2 years ago

Responsive order summary component

KurtJF• 150

@KurtJF

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

I am not sure if I should place the image inside the container or outside. Is there a way to prevent the image file to be included when adding a padding if it's inside the card-container?
Is it better to use <ul> rather than <p> for the Annual Plan and Price area?

-Any tips on how to write or know what CSS declaration to use? I feel inefficient and take too long in CSS, Thanks!

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted about 2 years ago

Hi there! 👋

Congratulations on completing another challenge! 🎉 It's good to see you finishing another challenge. 😄

Regarding your questions,

I did the same thing as you did. I put the img outside the container of the elements. Also, I couldn't think of a better approach so I believe this is already a good solution though. 🙂
I think it's better to use p instead of ul since it is not a list.
As far as the CSS, I would recommend getting yourself familiar with rem units. In general, rem is better than px because it adapts the user's font size setting (browser or even system setting).

One suggestion, all the images on this page are decorative images. So, I would recommend leaving the alt="" empty. I can that because if I remove all the images, then there won't be any missing information, it's just make the site looks less beautiful.

I hope this helps. 😊

Marked as helpful

KurtJF• 150

@KurtJF

Posted about 2 years ago

@vanzasetia thank you again for answering my questions! 😊

Regarding the rem unit. does it change when I set the font size to a different value?

If default the default value is 16px = 1rem
If I change the font size to 20px does it change to 20px= 1rem?

Vanza Setia• 27,795

@vanzasetia

Posted about 2 years ago

@KurtJF

The default value of the 1rem depends on the user's font size setting. In general, developers like to think that the users won't change the default browser's setting. So, we can assume that most users would have 16px font size in their browser settings. That's why 1rem is equal to 16px.

But, if you set the font-size of the html element then it will overwrite the user's font size setting.

For example:

html {
  font-size: 10px;
}

body {
  font-size: 1rem;
  /* Now, 1rem = 10px regardless of the user's font size setting */
}

However, it's best to never change the html font size since it can cause huge accessibility implications for those users with different font sizes or zoom requirements. Also, when you are working with a CSS framework, you will change every size that the framework has defined.

Marked as helpful

KurtJF• 150

@KurtJF

Posted about 2 years ago

@vanzasetia thanks for the explanation! Btw your explanations are easy to understand.👍

Vanza Setia• 27,795

@vanzasetia

Posted about 2 years ago

@KurtJF

Thank you for saying that! I am happy that you can easily understand my explanations! 😄

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hello Kurt, congratulations for your solution!

Look your solution component seems great, I liked also the way you've placed the background creating this custom wave effect.

All you card miss is the the responsivity, due the fixed width you've set for the container, the card doesn't contract when the screen scales down, to fix that you need to replace width with max-width. See the fixes below:

.card-container {
    max-width: 330px;
    margin: auto;
}

Hope it helps Kurt, and happy coding!

Marked as helpful

KurtJF• 150

@KurtJF

Posted about 2 years ago

@correlucas so does it mean its better to use max-width vs width to make it responsive?

Is there a situation in which using width is better than max-width? thank you!

Vanza Setia• 27,795

@vanzasetia

Posted about 2 years ago

@KurtJF

max-width will allow the element to shrink when it is needed while width won't allow the element either to grow or to shrink.

I think in this case, it's best to use max-width to limit the width of the card while still allowing the card to shrink on tiny devices (e.g. 320px width).

Marked as helpful

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

@KurtJF will be better to use width when you want some elements has a fixed width, not less or not more than the width you've set, liked the profile photo in some solutions, that you don't it scales, because anyway are tiny images like 24px width/height.

Here's a complete explanation about the difference and when use it

https://blog.prototypr.io/what-even-is-the-difference-between-width-and-max-width-8f37b282c7f1#:~:text=This%20is%20a%20simple%20way,the%20browser%20use%20max%2Dwidth.

Marked as helpful

KurtJF• 150

@KurtJF

Posted about 2 years ago

@correlucas thanks for the reference! I'll keep it in mind, thank you!

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