Skip to content
Submitted 3 months ago

Frontend Mentor | Recipe page

yahyad0sk1•110
@yahyad0sk1
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 specific areas of your project would you like help with?

i had done of this website and it was the time to make the website work for mobiles screens, but i got a problem, the problem is when i delete the margin around the image there's still some space around the image and it's not the border nor the margin and i can't remove it, please help me if you know how to fix it, sorry for my bad english.

"i fixed it"

Please log in to post a comment

Log in with GitHub

Community feedback

  • feelgooddd•400
    @feelgooddd

    You need to apply a css reset. All browsers come with some default margin and padding.

    A very very basic reset that should be on all projects minimum is

    *{ 
margin: 0;
padding: 0;
box-sizing: border-box;
}

    Also probably a bad idea to apply border radius in your global (*) selector.

    Marked as helpful
  • Ángela Cordero•10
    @Angela-Cordero

    Hi! I had the same issue and fixed it with negative values in the margin. I checked your code, in the media query just change the margin by:

    img { border-radius: 0; margin: -10px;
    } I hope it helps 🐱

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