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

Mobile first solution using flexbox for QR component

Iva 120

@Ivuska

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


Hi everyone, greetings from Prague,

I hopefully fixed all the stuff so it works on mobiles properly now.

Would be really great if someone can review the code itself.

Thank you a lot, Iva

Community feedback

T
Grace 30,770

@grace-snow

Posted

Hi

You need to swap the second heading for a paragraph tag, and remove the word “image” from the img alt attribute.

This looks very broken for me on mobile because you’ve used explicit widths and heights and because of viewport units. To fix you need to

  • change height 100vh on body to min-height so it can grow
  • change the width of the card to max-width and use rem (or px if you’re not comfortable using rem yet). The image can be display block and max-width 100%, but the max width on the card will stop it growing too wide
  • remove height on the card altogether, it is not needed and will only ever cause bugs. Let the height of the card be dictated automatically by the browser - it will be added up height of the cards contents, padding, and any vertical margins on that content. The height needs to be able to grow

Marked as helpful

0

Iva 120

@Ivuska

Posted

Hi @grace-snow, thank you a lot for your very helpful particular tips and explanation. I tried to fix all the stuff so it hopefully works properly also on mobile, too.

0
Paz Spera 170

@pazspera

Posted

Hello Iva!

Flexbox is the easiest way to get the card centered vertically and horizontally, it'll also save you the trouble of having to write media queries. On this challenge the size of the card remains the same so you could use the width on mobile to adjust the size of the card and that stays the same for desktop.

Rem or vh and vw is usually easier to use then pixels and it makes things responsive more easy as well. Here's a cool resource for flexbox if you want to dive a little deeper on it https://www.youtube.com/watch?v=u044iM9xsWU

Keep coding!

Marked as helpful

0

Iva 120

@Ivuska

Posted

@pazspera Thank you very much for your response and for the video tip that is really well understandable for me. I used the media queries mainly because of the different widths of the devices -> I understood from the jpgs with design that I need to show the different width of the background in my solution.

1

@JohnIdenyi

Posted

Nice work!

0

Iva 120

@Ivuska

Posted

@JohnIdenyi Thank you!

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