Submitted 9 months ago

html responsive css

Fanisi Oluwatimilehin Israel• 70

@DevPhancey

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Results summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I found writing the mobile view of this project somewhat difficult, and I tried adding the figures using js which i later ended up hardcording. Would really like to know what people think about this one.

Community feedback

joelsavio• 50

@joelsavio

Posted 9 months ago

Hello Fanisi Oluwatimilehin Israel, Try to set the parent container minimum height to 100 view height like min-height=100vh in the parent div. It will make the container to occupy full screen on different screen sizes. Other than that, good. You will get better by working on more projects. All the best!

Marked as helpful

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted 9 months ago

Hello there 👋. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

I think it looks great, just a few suggestions. For example, you should use a CSS reset to eliminate default styles since your body element has about 8px of margin that generates a scrollbar.

A 12x12 grid might be too complicated. You could enclose both columns in a single div with a max-width to prevent them from becoming too wide and use repeat(2, 1fr) to create the two columns.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

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