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

QR code component using Flexbox

Martinaā€¢ 150

@PastoreMartina

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


I'm resubmitting after some changes.

How can I keep the card in the center of the page but push the attribution at the bottom using Flexbox? I'd like to prevent overflow on smaller screens (e.g.: landscape mode).

Community feedback

Oyeyinka Ojoraā€¢ 170

@oyeyinkaojora

Posted

Hi Martina,

Remove the attribution from the card container

Use this code below to center your card horizontally and vertically

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; 
}

If you find this helpful kindly mark as helpful

Marked as helpful

1
Nelson Upretyā€¢ 320

@nelsonuprety1

Posted

Hello, pastore martina congrats for completing the challenge. As you have mentioned about attribution not going to the bottom, I have explained and added code to fix the problem of attribution not going to the bottom of the page. So please check your github code file and merge the changes if you like it.

Thank you

1

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