Submitted 11 months ago

QR Code using Flexbox

Simon Fraser• 30

@simoncodes-dev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I still am confused with the best way to use Flexbox in these contexts.

Was there a better way than using "viewport height and width" as the content containers?
Should I have allowed for text overrun more, because the box is still constrained to 50vh?

Community feedback

Sebastian Heitmann• 150

@DonHeidi

Posted 11 months ago

Hey Simon,

this looks good! regarding your questions. If you are using width: 100vw; you could introduce something like horizontal scrolling where you don't want it. As you are using flexbox you should not need to specify the width as flexbox is spanning over the full width.

Using height: 100vh: will work on Chrome but not on Edge for example and will fail on mobile views because of the dynamic address bar that is showing up after page load but hides when scolling down. It is possible to use dynamic viewport height, height: 100dvh:, or the small viewport height, height: 100svh; which is the smallest height the viewport could have, which can be better as the dynamic viewport height will change.

Kevin Powell made a good video about this, which you can find here: The problems with viewport units

You can use height on the card but you don't have to. You can achieve a similar result by using something like this on your .card class

display: flex:
flex-direction: column;
gap: 1rem; /* just an example */
padding-bottom: 1.5rem;

By using gap, paddings and maybe margin on the card contents, you will achieve a responsive layout for the card with overall more control. The card height will adjust to its content this way.

Hope this helps and happy coding!

Marked as helpful

Simon Fraser• 30

@simoncodes-dev

Posted 11 months ago

@DonHeidi This is incredibly helpful, thank you! I'll make a couple of adjustments! I visited the component on mobile and found that it was looking awful, so had to make some adjustments already.

Øystein Håberg• 9,450

@Islandstone89

Posted 11 months ago

Hi. Adding to the suggestions above, here are a few things to consider:

HTML:

You have a <main>, which many beginners forget to include, so well done. However, main should include all descendants of the body - you have a div that is outside of the main. Make the.container a main, and the .card a div, and you solve the problem.
You shouldn't have sections on this challenge. You just need an img, a heading (h1 is fine, though remember that is usually reserved for one MAIN heading on a page. So, if you had several headings on the card, you would have to use h2), and a paragraph, without any divs wrapping these elements.
The image needs alt text. This is crucial for screen readers, and it also tells sighted users the content of the image if it fails to load. The alt text should be descriptive, and in this instance, it needs to include where it leads to. Don't use phrases like "photo of" or "image of", as the screen reader will automatically say it is an image.

CSS:

Instead of importing the fonts in the CSS, you should link to it in the <head> section of your HTML document.
Remove the max-height and width on the card. You rarely want to set a max-height (or a fixed height). The default behavior for a component is to let its content decide its height,and for a good reason. If you set a height (or a width!) and the content takes up more than the available space, you will get overflow.
Remove flex-shrink: 5, it doesn't have any effect and shouldn't be used here anyway.
max-widthis actually sometimes of use, but it should be in rem instead of px.

Good luck :)

Marked as helpful

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