Submitted 6 months ago

Responsive QR-Scan card using Bootstrap

Linda Anima Ohene•60

@Linda-Anima

Preview site View code

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'm very proud of myself because I was able to do it well.
I would change the background color next time.

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

I spent much time with the positioning of the card, how to center it on either the desktop-view and phone view.

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

I would like to know more of margin and padding.

Community feedback

JuvoGenesis👾•2,010

@AkoToSiJeromeEhPosted 6 months ago

Hey ! great work out there i notice that you are using margin , absolute , and transform in order to center the qr card component , i suggest that you use display : flex and display : grid less code and also complexity when using. that's all and happy coding !!!

you can explore more info about display property and see its magic

body {
  background-color: hsl(212 45% 89%);
  min-height: 100vh; // add this
  display: grid; // add this
  place-items: center; // add this 
}

.card {
  border-radius: 15px;
  text-align: center;
  margin: auto; // remove this
  width: 300px;
  height: 450px;
  background-color: hsl(0, 0%, 100%);
  position: absolute; // remove this
  top: 50%; // remove this
  left: 50%; // remove this
  transform: translate(-50%, -50%); // remove this
}

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