Submitted 3 months ago

Responsive Single Price Grid using Flexbox and Custom Fonts

accessibility

Selasi•100

@Sussana7

A solution to the Single price grid component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of achieving a clean and visually appealing layout that closely matches the design, especially the responsive layout for different screen sizes using Flexbox. Next time, I would explore using CSS Grid for more control over layout spacing and alignment, and possibly use BEM naming for better class organization.

What challenges did you encounter, and how did you overcome them?

One of the main challenges was positioning the footer correctly when it was placed outside the <body> tag, which caused layout issues. After troubleshooting, I moved it back into the <body> and adjusted the layout structure. I also spent time refining the spacing and typography to ensure a good visual balance, which I achieved through consistent use of margin, padding, and line-height.

What specific areas of your project would you like help with?

I’d appreciate feedback on:

How to better manage spacing between sections while maintaining responsiveness.

Suggestions on improving the accessibility of the button and text structure.

Best practices for organizing CSS for small projects like this to maintain scalability.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Selasi's solution.

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