Skip to content
Submitted 4 months ago

Responsive Image using viewports

Udit Rai•30
@udit-rai
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am proud of how I learned about responsive websites, a weak point all throughout my college days, and was able to easily implement the solution; without any help other than the tutorial on responsive websites from Coder Coder (youtuber)

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

I encountered challenges of white space around the image. Initially I could not figure out why this was happening, but it went away when I set the body tag padding and margins both to zero

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

If there is a way to make it more streamlined and efficient, please tell ^^

Community feedback

  • Bhuvnesh Upadhayay•2,000
    @bhuvi819381Posted 4 months ago

    CSS Reset for Better Styling

    Hey bro! Here's a quick and clean CSS reset to save you from any unwanted padding, margin, or weird box behavior. Copy this into your stylesheet, and you're good to go!

    /* Simple CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    Why Use This?

    margin: 0;: Removes any default margins browsers throw in.

    padding: 0;: Clears out default paddings.

    box-sizing: border-box;: Keeps width/height consistent without surprises when adding padding or borders.

    Trust me, this one-liner saves you a ton of headaches later. It's clean, simple, and gets your layout in shape from the start.

    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