Used grid properly in this project for the first time. Only thing I am not quite happy about is that the cards move to the right once the window gets too small (and hasn't changed to mobile version yet). Feedback on this problem is very much appreciated!
Anthony Licata
@anthonyplicataAll comments
- @FinnJ04Submitted about 1 year ago@anthonyplicataPosted about 1 year ago
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.
0 - @manuacgSubmitted about 1 year ago@anthonyplicataPosted about 1 year ago
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 helpful1 - @daniel-ribasSubmitted about 1 year ago@anthonyplicataPosted about 1 year ago
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 helpful0 - @Ocece77Submitted over 1 year ago
Hi this is my first project on FrontendMentor !!
What did you find difficult while building the project?
Deploy it tbh haha 😭
Which areas of your code are you unsure of?
// .card{ margin: 165px auto; //
I think there's a simple way to center it (maybe with display : flex 🧐 and justify-content and align-item : center )
Do you have any questions about best practices?
I think that I can optimise this code but idk how so any suggestion would be nice !
@anthonyplicataPosted over 1 year agoThis 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 helpful1 - @Kingnorj1Submitted over 1 year ago
Not responsive at the moment! i will learn Css position and media query today! YOUR FEEDBACK IS WELCOMED
@anthonyplicataPosted over 1 year agoI 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 helpful0