Responsive QR code layout

Solution retrospective
I use mobile-first strategy, I use HTML and CSS
Please log in to post a comment
Log in with GitHubCommunity feedback
- @0onima
The use of text-shadow was very nice, learned something new thanks.
Marked as helpful - @Hassiai
In the html use the main tag instead of a div with a class block. There is no need to give theimage a dive and put all the text-content in one div:
<main><img><div><h1></h1><p></p></div></main> the attribution div should be a footer and outside the main To center a content on a page , add min-height: 100vh; display:flex ; align-items: center; justify-content:center;;to the body instead of .container, use main. Give it a width value and a padding value there is no need for display:flex; and it properties in the main. There is no need to declare a margin value,z-index value, height value and text-shadow value for the main. Give the img a max-width of 100% . give the div for the text-content a padding top and bottom value. Hope am helpful HAPPY CODINNGMarked as helpful
Join our Discord community
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