Submitted 4 months ago

QR Code component with CSS flexbox

vcgmchen• 10

@vcgmchen

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Is there a better way to center the component? I used flexbox and set the page height to 98vh (I assume this isn't best practice).

Community feedback

Chamu• 12,970

@ChamuMutezva

Posted 4 months ago

the body is usually set to min-height: 100vh , I would go on and say that should be the best practice.
the image should have an alt value, it seems to me to carry a message. The message could be something like alt="QR code for Frontend mentor"
landmark elements are one of the building blocks of a website, this challenge should at least have the main element.
for font sizes , it is recommended to use rems - using px values is not recommended. See the following article for further explanation. Why font-size must NEVER be in pixels

Happy coding

Marked as helpful

vcgmchen• 10

@vcgmchen

Posted 4 months ago

Hi Chamu, thanks for the feedback.

Regarding landmark elements, would you suggest that I change <div class="card" to <main class="card">? Or is it better to subsume the div into a main element entirely? As in:

<main> 
  <div class="card">
     ...
  </div>
</main>

Chamu• 12,970

@ChamuMutezva

Posted 4 months ago

@vcgmchen

Hi.

The first option is perfect. Change the div to <main class="card">

John Carruthers• 310

@techyjc

Posted 4 months ago

vh doesn’t take into account address bar in mobile browsers or non floating scroll bars. There is the dvh option dynamic viewport height sizing but it lacks full browser support. The video below covers sizing containers and then use flexbox Justify-content and aligh-items to center the Flexbox content.

This YT video might help… (https://youtu.be/-sF5KsEo6gM?si=vpMXHedXC4cfjVP7)

Marked as helpful

vcgmchen• 10

@vcgmchen

Posted 4 months ago

Hi John, thanks for the feedback and bringing my awareness to dvh. I used 98vh to account for around desktop address bar but didn't consider the size of address bars in mobile. Looks like dvh is a good solution to 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