Submitted 2 months ago

Responsive Recipe Card using plain HTML and CSS

Gina Wang• 170

@gina-wang-1021

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?

Replicated it pretty accurately!

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

Making it responsive was pretty challenging!

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

Once the viewport width is less than the default card width for a certain degree, the card starts to overflow on the left side. How do I solve this problem?

Community feedback

Joshua Hovis• 200

@joshhovis

Posted 2 months ago

Hi Gina! Your project looks good! I looked at your page and I don't think that's an issue you have to worry about. I didn't notice that happening until I reached under 200 px with the responsive web tool. I don't think that there are any devices out there that are that small. If you are wanting to resolve it, I would just set a breakpoint for the size you notice it happening at so like: @media only screen and (max-width: 200px) {} And just set your font size to be a little smaller, I would think that would work. But once again, I really don't think it's anything that you need to be too concerned with

Marked as helpful

Gina Wang• 170

@gina-wang-1021

Posted 2 months ago

@joshhovis Thanks for all the feedback and advice!

Victor• 510

@therealmaduanusi

Posted 2 months ago

nice work! 😊 but what do you mean by this "Once the viewport width is less than the default card width for a certain degree". Especially the to a certain degree

Gina Wang• 170

@gina-wang-1021

Posted 2 months ago

@therealmaduanusi Hi! Thanks for the clarifying question! I was testing how responsive my design was using live server on chrome when I found out that if I adjust the width and shrink it down to an extreme level (narrower than 2/3 of the card width), the content starts overflowing on the left-hand side. Overflowing in the sense that there's not even a horizontal scroll bar available, parts of the texts simply got covered and can't be seen on the website. I think there might be some issue regarding the text size since I used a lot of px units but I'm not entirely sure where can be improved. Thanks for the help!

Victor• 510

@therealmaduanusi

Posted 2 months ago

@gina-wang-1021 Hi, ok always be careful on your height property if you're using a relative(%, rem, em e.t.c) or fixed(px) unit, try adding it to the container of the card.

Gina Wang• 170

@gina-wang-1021

Posted 2 months ago

@therealmaduanusi understood! Thanks for the advice!

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