Submitted
@steven-barkley
It took me a day to complete. It was a great exercise and one I need to revisit once I get feedback. It really woke me up to my skill gaps and lack of comfort with responsive design.
@tonyruizo
Posted
Hello Steven!
Check out those accessibility issues in the report, easy fix for that is to wrap your html div contents inside a landmark, as in <header></header, <main></main>,<section></section> and <footer></footer>.
Also don't forget the mobile design. Look into some CSS Grid and media queries and you should be able to make it happen.
@rebekahshaw92
Posted
Hi Nice first attempt.
A quick tip for placing the card/clearfix centre of the browser is to add bother padding and margin as 0 auto.
Another tip is to add your style to an external stylesheet rather than the HTML file. This makes your code much easier to manage. I like to place my css in its own folder so that I know where it is and it means if yoou have more the one css file it can easly be found.
Happy Coding!
@steven-barkley
Posted
@rebekahshaw92
Thank you. I remembered that I could set the max-width and min-with a container and experimented until I found the right size. I also linked the CSS stylesheet for organization and management.
@OneManBanned
Posted
Hi Steven,
if you remove the margin from .right.
and add
body { display: flex; justify-content: centre align-items: centre; min-height: 100vh; }
That should centre everything thing in the middle of the page.
@steven-barkley
Posted
@OneManBanned Thank you. I have made the local changes and now my Product card is centered. Now I need to make the text responsive so it doesn't spill over and will need to implement a media query or the like.
Very helpful.
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
