Qr Code Project

Hi there,

This is a good attempt, and I can see why you've used certain code. I've made several suggestions below when you refactor this:

• Avoid using the absolute to position this card and instead use flex properties (ie. display: flex; flex-direction: column) and margin: 0 auto to centralise it
• You can style the body parent element of the card by also using flex properties and height: 100vh to vertically center the card (height: 100vh display: flex; flex-direction: column; justify-content: center;)
• You should set a max-width: 320px, for e.g., on the parent container, and a width: 100%, which means any value above 320px will keep it fixed at that, and any width below will take up the full length (remember to convert these px to rem values)
• Remove the max-width property on the child img element and replace this with width: 100%. You also won't need the margin property.
• You can remove the .img-block element as this doesn't serve a purpose here (presumably this was to be the parent container which wraps the img? Either way you can remove this)
• Use a CSS reset which removes all pre-set styling browsers add to web pages, which can cause cross-browser inconsistencies. Here's a good modern one which is recommended Link
• It's best to use explicit (ie. rem) units for positioning elements, instead of % because these are more variable and prone to cross-browser responsiveness issues

Hope this helps!

Hello rdonatiello1,

I finished up my work as well and I learned alot of it. First at all I see that you didnt start with Mobilefirst-workFlow, because if you would check the view of your live preview with a mobile device of 320px you would see that the view doesn't fit in correctly.

I see that you tryed some things out to horizontally & vertically center the container and you can easily do it with (grid) or (flexbox). Here is a link for a deeper look for centering: https://moderncss.dev/complete-guide-to-centering-in-css/

Here is as well a deep dive why its better to use rem than px for font-size: https://fedmentor.dev/posts/font-size-px/

I wish you all the best in updating your solution and try to make things more clear in your HTML & of course the landmarks like main are really important.

Here is my solution I made for a quick review for yourself to check things. https://www.frontendmentor.io/solutions/responsive-with-css-grid-and-relative-percantage-usage-eaooSN-W4O#comment-64cbc8d47b5333be8412f4a8