Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Price Container Component, HTML and CSS

@DiegoPasaye

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


i try add "border-radius" in the container but i cant get it applied in the container, please, who can help me whit this?

Community feedback

@nurbektiaw

Posted

The border-radius didn't work in your container because your .container and other container are overlapping. You need to add extra line to your .container css with = " .container{ overflow: hidden; border-radius = 10px; // the number just example "

BUT You'll notice that the border radius didn't work at the top left and right of your page, only work at the bottom of your page. Don't worry, it's because your .firstContainer slightly under the container cause <div> had default margin/padding. so I suggest that at your css you should setting the padding and margin default by 0 first by adding this code:

*, *::after *::before { margin=0; padding=0; box-sizing = border-box; }

I recommend to use those code to initialize every css you code because it'll give you easier time to calculate margin/padding between element.

BUT after setting for * (all element) padding and margin to 0, you need to setting the padding/margin of your code again.

LAST suggestion, if you don't want to change much on this project, just add border-radius to container that you've colored.

hope it'll help. Feel free to ask again

0

Please log in to post a comment

Log in with GitHub
Discord logo

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