Skip to content
Submitted over 2 years ago

Mobile-first Solution using bootstrap 4 and CSS media queries

Okiemute Mariere•10
@okiemute2019
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This project tested my knowledge of class heirarchy alot. Was it wise to utilize bootstrap to improve responsiveness?

Did I use CSS media queries correctly?

Is my CSS code standardized enough?

Code

Please log in to post a comment

Log in

Community feedback

  • Hassia Issah•50,390
    @Hassiai

    Replace <div class="container"> with the main tag, <h3></h3> with <h1></h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. the <div class="attribution"> should be out of <div class="container">.

    To center a content on a page, add min-height:100vh; display: flex; align-items-center: justify-content: center; to the body. instead of giving .container a margin value to center it.

    Hope am helpful

    Aside from these , everything is good, well done for completing this challenge. HAPPY CODING

    Marked as helpful
  • 👾 Ekaterine Mitagvaria 👾•7,860
    @catherineisonline

    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 🤩

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