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

SASS based CSS Grid for

Fraser Watt 1,790

@fraserwat

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


The button I can't seem to get to not cut off the edge of the border-radius? Overflow is set to hidden, which seems to be the most common cause of this according to google. Any tips here v helpful!

Also any pointers on things within the CSS I could simplify much appreciated, there's a few bits that feel like they could have had more elegant implementations.

Community feedback

P
Grace 27,710

@grace-snow

Posted

Hey, only looked very quickly but one point is that you don't need the first media query. Just pop that grid template area line on the container to start with ☺

1
Rayane 1,935

@RayaneBengaoui

Posted

Hello Fraser Watt,

First of all, congrats for the challenge !

I'm not sure to understand what is your problem, but I guess it's because your border-radius: 5%; is on your input while it should be on your div .button-container. Also, you could add outline : none to your input to avoid the black border on click.

Let me know if this is what you were looking for ! :)

Overall, well done for the challenge and happy coding ! 😃

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