Submitted about 2 months ago

Recipe Page

Agustina•155

@aguscorvo

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Recipe image and padding in responsive view. I ended up using a div as a wrapper and media queries.

Community feedback

Bruno Banoczi-Cs•40

@L4r4TWPosted about 2 months ago

It's a pleasure to see a so perfect solution. The mobile view is also beautiful.

Making the image responsive was a huge pain for me to, I copy my mediaquery selection, hopefully it will show you something helpful:

/* 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);
  }
}

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