@anthonyplicata
@FinnJ04
Submitted
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!
@anthonyplicata
Posted
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
Submitted
@anthonyplicata
Posted
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
@daniel-ribas
Submitted
@anthonyplicata
Posted
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
Submitted
Hi this is my first project on FrontendMentor !!
Deploy it tbh haha 😭
// .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 )
I think that I can optimise this code but idk how so any suggestion would be nice !
@anthonyplicata
Posted
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
Submitted
Not responsive at the moment! i will learn Css position and media query today! YOUR FEEDBACK IS WELCOMED
@anthonyplicata
Posted
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
