Submitted 3 days ago

Responsive recipe page using CSS

imaginarygarden• 80

@imaginarygarden

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

Community feedback

clickglue• 120

@clickglue

Posted 2 days ago

Hi Imaginary Garden, beautiful solution! Very well organised CSS file, impressive, makes it easy to read. Two small questions: from earlier feedback I understood that it is better to load fonts in the HTML file, do you know what is better? And in the design files I saw that the mobile solution has no margin around the amge and no border radius. Your solution doesn't implement that.

Marked as helpful

imaginarygarden• 80

@imaginarygarden

Posted 2 days ago

@clickglue Hey, i've seen other feedback about font loading. Essentially it is better to load it in css since you can configure the font implementation. I would recommend this website for the fonts: https://gwfh.mranftl.com/fonts. Yes I did not implement the margin on the mobile since I didn't find the correct way to do it.

clickglue• 120

@clickglue

Posted 1 day ago

@imaginarygarden Thanks, I've tried it and indeed it works well if I download the fonts. Thanks for pointing this out!

ldonnianni• 110

@ldonnianni

Posted about 14 hours ago

Hi @imaginarygarden! Great job, the styling within the article looks the same. You could add margin bottom and top in the article(I think is 8rem)and then it will be just like the original. You can use @media to style different sizes of screen. This way you can style for mobile(it is only the article) and for desktop. The recomendation usually is to style for mobile, and then with @media(min-width: 600px), for example you can modify only the elements you need. There are several tutorials about this in Youtube.

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