Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using css

@gdsr-abhishek

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I make the card to be placed to middle of the webpage?

Community feedback

Mikhail 440

@MikeBeloborodov

Posted

Hey! Good work on that solution. To answer your question: Let's say that you have a body and 1 div, to center this div inside the body you need to do this

body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: green;
}

div {
width: 100px;
height: 100px;
background-color: red;
}

If you do this and remove height on your body, then it won't center vertically, because body does not stretch to the full height without content. But if you add height - then it's a box that covers the full screen and your div will be in the center because justify-content centered it horizontaly and align items verticaly.I added some background color on body and div to see how it stretches. You don't have to add height and width 100 px to your div, I just did this for the showcase, you should have your own height and width on your div.

Marked as helpful

1

@gdsr-abhishek

Posted

@MikeBeloborodov Hi Mike, Thank you for this suggestion I was able to go into the root of the issue and resolved it!!. New changes will be deployed soon :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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