@FinnJ04
Latest solutions
Latest comments
- @anthonyplicata
Nice job on using grid! It's a great feeling when that one clicks. If you center everything on the page it will prevent everything from moving off just to the right. Using margin: 0 auto; is a very helpful in centering things. Always sneaks up on me when I'm trying to align something left or right and forget that the margin is set somewhere😅. Responsive size values like % or vw/vh will help with the boxes changing as you manipulate the screen size. Setting the width to 100% and the max-width to something of your choice might give you a better scaling of the cards.
- @manuacg@anthonyplicata
Looks good!! If you want to get it centered in the page you can try adding to body selector
min-height: 100vh (this will set the height to full view height) margin: 0 auto (this will set the left and right margins even) width: 100%
Marked as helpful - P@daniel-ribas@anthonyplicata
Looks great! And you nailed the centering of the card which I definitely struggled with when I first got here.
If you chose to use the h2 tag for difference in size compared to h1 I would suggest sticking with the h1 tag since there are no other headings. Use CSS to style the text the way you want it. It's more so technically correct but also allows for screen readers to properly read the markup. As for using <header> and <main> I'd say this challenge doesn't have a real header other than maybe the qr code image? But you could put the text contents inside of a main tag to make it more accessible!
The "Challenge by..." text is footer content. So you could take .attribution and change it from a div to footer and take it out of that section container. You could go even further with accessibility and place the text inside a <small> tag inside the <footer>. It will shrink the font size a little but it will also tell the assistive tech that it's small footer content.
Marked as helpful - @Ocece77@anthonyplicata
This looks great honestly!
I had gotten good advice for centering the content on this one as well.
I do use flex now, but for flex or grid I was told to set min-height to 100vh. Seemed to resolved a whole lot for me.
Marked as helpful - @Kingnorj1@anthonyplicata
I just did this challenge as well. What I learned to make it responsive was using flexbox and grid. I used a <picture> element that lets you have an <img> and <source srcset=""> so the browser can use both images depending on the screen size. w3schools.com helps me a whole lot.
Marked as helpful
