First time trying to make something responsive on my own. (I did a follow along tutorial like a year and a half ago) I couldn't get the mobile size version to center on the page and I couldn't get the footer to be below the content. ARRRGG :)
UPDATE: I got some great feedback that told me how to fix my issues!
Hello Kristin,
Using display: flex-box;
justify-content: center; /* to center the items horizontally on the main-axis */
align-items: center; /* to center the items vertically on the cross-axis */
That would made centering your project in the center of the page. In your media query of max-width: 920px, you could use "flex-direction: column" to stack the items on top of each other.
You did well on not having any accessibility and html issues. Congrats!
Happy Coding!!! 👍
Hi everyone! I would like feedback on what I can improve on the site, such as responsiveness and code in general. Thank you very much!
Hello Anderson,
You were able to get your solution to align as close as possible to the design. That's great! I am not able to get that done yet.
After reviewing your solution submitted, I am not seeing the font-family "Outfit" being applied to your p tags. I am seeing the "font-family: Outfit" in the CSS on the p tags, however, I am not see a link in the HTML markup or an import in your CSS file to gain access to Google Fonts. You may also, for best practices, want to include a backup font in the event the font of your choice does not work.
Font-size and padding are needed for your QR code component. The font size for your first p tag needs to be lower and there should be padding to the second p tag to create space away from the bottom.
You may want to lower the opacity of the box-shadow to match closely to the design or remove it entirely to get the desire result.
The sharp corners of the image needs a border-radius to match the container.
One last tip on your submitted solution. For your media query set to max-width: 500px, you can change the margin from 85px 28px 0 28px to margin: 0 auto to make it fit in the center of the screen to avoid it being too far to the left.
Once again you got it to fit close to the design when I use the design comparison slide.
Keep on coding!
