Skip to content
Submitted about 2 months ago

Responsive recipe page

Bruno Banoczi-Cs•40
@L4r4TW
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 am most proud of the responsive design, a was able to create
  • Next time I want to make the CSS more structured
What challenges did you encounter, and how did you overcome them?
  • The bigest challange was to make the header image full width on mobile phone. It was hard, because the element a placed the image inside has a padding, and I spent a lot of time to figure out how to make the image full width, without removing the padding on mobile device. ChatGPT and a lot of trial-error helped to overcome this problem. Here is the solution:
/* Remove border radius on mobile screens */
@media (max-width: 768px) {
  /* Adjust the breakpoint as needed */
  .container {
    border-radius: 0; /* Remove border radius on mobile */
    margin: 0;
    padding-top: 0;
    /* box-sizing: content-box; */
  }

  .container img {
    border-radius: 0;
    width: 100vw;
    height: auto;
    margin-left: calc((-100vw + 100%) / 2);
    /* margin-left: -32px; */
  }
}
What specific areas of your project would you like help with?

  • In the "Instruction section" the numbers wont change to Outfit font family. I don't know why.

  • In inspection mode (FireFox developer edition) if I change the view to "Galaxy S20 Android 11" and "Galaxy S10/S10+ Android 11" there is a few pixel wide stripe at the right, and looks like the page is a bit wider than the screen. I don't know why.

Community feedback

  • Teodor Jenkler•3,740
    @TedJenklerPosted about 2 months ago

    Hi @L4r4TW,

    Great job on the project! I really like how you've applied semantic elements throughout. Just a quick note—when using the <section> tag, remember that it needs either an aria-label, aria-labelledby, or title. Without this, the section won’t be recognized as a landmark and will essentially function like a <div>.

    Also, on tablet view, I noticed that your image stretches to the full width of the site. Adding some spacing so that the image aligns with the rest of the content would really improve the overall look.

    I also wanted to compliment your heading structure—it's well-organized and makes the content easy to follow!

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    1
    Bruno Banoczi-Cs•40
    @L4r4TWPosted about 2 months ago

    @TedJenkler Thank you Teodor, I didn't even recognize the tablet problem! I will also use the aria-labels in the sections☺️

    1
  • Corvida Raven•680
    @SheGeeksPosted about 2 months ago

    Congrats on completing this challenge. It seems you have fixed the issue of the instruction list numbers matching the correct font. Kudos to you on that!

    One thing I would suggest as a bonus action is to orient your media query towards bigger screens (desktop) rather than overriding your existing code to fit mobile screens. In doing so, you won't have to override anything, you will simply add to the existing code within the media query.

    Writing code from a mobile-first standpoint will always make transitioning images and other elements to bigger screens much easier and often uses less code.

    Marked as helpful
    1
    Bruno Banoczi-Cs•40
    @L4r4TWPosted about 2 months ago

    @SheGeeks Thank you so much! I will apply your suggestions.

    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