Skip to content
Submitted 8 months ago

Responsive html page using only html and css resources

felipenwn•10
@felipenwn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

i think my site looks like the original design and i'm proud of it, but i need to study more to make less work around

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

mainly the spacement challenges, because i didn't sutied about the paddings and margins yet but i can get by this situation

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

there is a nutritional table in the last portion of the site, i couldn't figure out how to solve the spacament problem, because in the original design there is a medium gap between the words and the numbers, and i could only think in the property : justify-content: space-between; but this property made a big gap between the contents and that wasn't what i was looking for

Community feedback

  • Carsten Körner•170
    @carstenkoernerPosted 8 months ago

    Hola, that looks really good. For the nutritional value table I worked with a real html table and not a flexbox. I set the table with 2 rows to 100% width and thus had the right spacing. Your responsive.css works well. Unfortunately only up to a width of 375px. From 376px to approx. 770px the responsive design unfortunately does not work. Better leave the responsive css active up to 450px and limit your recipe card with max-width. Then it adapts to the width of the viewer until the responsive.css finally takes effect.

    JM2C

    0

Please log in to post a comment

Log in with GitHub

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