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

Single Price Challenge with HTML and CSS Flexbox

@arevalosebastian

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


Having issues with grid, so I used flexbox, any tips about my CSS? Thank you for you attention.

Community feedback

Vanza Setia 27,855

@vanzasetia

Posted

👋Hi Sebastian! My name is Vanza!

🎉Congratulations on finishing this challenge! I have some tips that may help improve your CSS.

  1. It seems like you keep repeating @media screen and (min-width: 700px). My recommendation is that making them into one single media query, that way your CSS will be much cleaner.
  2. For the box3__text, I recommend to use ul and each text wrap in li tag, that way you can easily control the spacing for each li.
  3. Last but not least, you can use CSS custom property for your colors, that way you don't have to keep typing or copy pasting the color.

That's it! Hopefully those tips will help you to improve your CSS!

And as always keep coding and happy coding!

Marked as helpful

1

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