Submitted almost 2 years ago

Responsive design made mostly with grid

Subin Adhikari• 40

@Asfen

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I found it very difficult to align the items vertically. I literally copy pasted the code from w3school page. This is literally my first challenge. and 3rd ever page I build. Any and all guidance will be greatly appreciated.

Community feedback

Hassia Issah• 50,670

@Hassiai

Posted almost 2 years ago

Replace <section class="center"> with the main tag and <h2> with <h1>to fix the accessibility issues. Remove the extra div and closing tag div from the html file

To center a content on a page, add min-height:100vh; place-items: center: to the body instead specifying a class center for that and giving the body a height value.

There is no need for position: absolute and its properties in the footer.

Hope am helpful Well done for completing this challenge, you did a good job , Happy Coding.

Marked as helpful

Subin Adhikari• 40

@Asfen

Posted almost 2 years ago

@Hassiai Hi, first of all thank you for taking your time and pointing our mistakes in the code. It has been great help to me. I did all the things you suggested but the QR doesn't center without declaring display: flex; for me. Still then vertical alignment is not working.

👾 Ekaterine Mitagvaria 👾• 7,600

@catherineisonline

Posted almost 2 years ago

Cool solution!

To improve semantics, make sure to wrap the entire code in the main tag not including header or footer tags. It will help to remove report issues and improve accessibility as well.

IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

Please log in to post a comment

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