Skip to content
Submitted 6 months ago

Responsive recipe page

M•40
@mkalmetieva
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?

Setting margin: 0; padding: 0; at the beginning helped me a lot with further indentation styling

What challenges did you encounter, and how did you overcome them?
  1. At first I tried linking static downloaded fonts in html with , but it didn't work. I succeeded with using @font-face in CSS directly.
  2. I also had a problem on mobile: the content was wider than 100% of the page. I fixed it by adding box-sizing: border-box;.

Community feedback

  • Ashong•930
    @AshongAbdallah06Posted 6 months ago

    The content is not wider than 100% on mobile. 100% means it should take up the whole width of the screen, which is exactly what it is doing. Or maybe I'm missing something. Feel free to let me know.

    0
    M•40
    @mkalmetievaPosted 6 months ago

    Hi @AshongAbdallah06! Thank you for your comment!

    Without using box-sizing: border-box, by default the actual width of an element is calculated as width + padding + border. This is the problem I had at first. Here is a short snippet reproducing this:

    <html>
<head>
</head>
<body>
  <div style="width: 100%; padding: 50px; border: 5px solid red;">
    This div does not fit into the screen, because padding adds width.
  </div>
</body>
</html>

    After I added box-sizing: border-box, the actual width has become equal to the width I specified (100%), as I wanted it to be. This article helped me to understand the topic: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

    1
    Ashong•930
    @AshongAbdallah06Posted 6 months ago

    Oh yeah, I didn't even think of that. Thanks for pointing it out @mkalmetieva

    1

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