Submitted 4 months ago

Responsive interface using HTML and CSS

Linda Anima Ohene• 60

@Linda-Anima

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

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Was proud of the fact that I was able to get the idea on how to go about it as soon as I saw the design.

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

How to set the required height of the container and the card.

I kept adjusting the height till I got what I wanted.

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

Media queries

Community feedback

Ibrahim Oyeniyi• 430

@Mtrxxo

Posted 4 months ago

Hey Linda 👋,

Tye concept of Media Queries can be daunting at first, but with practice, it gets easier... Just remember for any large stuff of your design... Make the size smaller than phones, which most of them are 360px, but iPhone5 is 320px... You might wanna consider everyone, but as iPhone5 is no longer in use, you can just make your smallest size 360px.

For this design... Try making your mobile view of ".card" about 350px and ".container" having a margin top makes your page have white on the top... Try adding the background color you added to ". container" to the "body" element. If you still don't get it, use my submission for the challenge as a guide for you.

Happy Coding 😊✨

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