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 with CSS Grid and Flexbox

@JTherien

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


This solution creates a scroll bar when I include the attribution line in the footer. I'm not exactly sure what to do to get this page to render without a scrollbar.

I'd also like feedback on how the CSS is set up. I built this out haphazardly, so I am fairly certain that this isn't the right way to organize a CSS file. For example:

  • I feel that the headline and subtitle classes can be consolidated down somehow, I the only differences between these two classes are the font weights, so there are a lot of duplicated lines
  • I'm uncertain if how I nested the classes under the widget class is the proper way to organize the CSS. It works, but I, personally, think it's difficult to follow the relationships when looking at the code.

Community feedback

@Oliveiraster

Posted

Normally when starting a project I use the parameters to reset any style applied by the browser.

*{ margin: 0; padding: 0; }

this will solve your scrolling problem.

Marked as helpful

1
ZeroHora 270

@RailsonOL

Posted

About scroll bar, you put in container: min-height: 100vh;

100vh makes your container occupy 100% of the visible height of the screen, which in turn pushes the rest out

this line should be in the body

Marked as helpful

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