mobile friendly screen size using css @media query

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Hakizimana, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

  I saw that you've used position: absolute; left: 40.25%; top: 15.25%; to try to align. My advice for your is to use flexbox to create this alignment. For example, first of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body.

  body {
      min-height: 100vh;
      background-color: hsl(212, 45%, 89%);
      font-family: "Outfit", serif;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  Remove these properties to make the alignment work:

  .square {
      max-width: 258px;
      /* height: 424px; */
      background-color: hsl(0, 0%, 100%);
      /* position: absolute; */
      /* left: 40.25%; */
      /* top: 15.25%; */
      border-radius: 3%;
      /* padding: 0 10px 10px; */
  }
  

  To make your image fully responsive add display: blockand max-width: 100% :

  img {
      max-width: 100%;
      display: block;
      border-radius: 3%;
      /* width: 250px; */
      /* height: 250px; */
      /* position: relative; */
      /* top: 3.625%; */
      /* margin-bottom: 10.625%; */
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  HAKAZIMANA CLEMENT•20

  @Hakizimana-ClementPosted about 2 years ago

  @correlucas whoah whoah! first of all Thank you for welcoming me. Your support matters a lot to me and I will begin to use it.

  Thank You & Happy coding 😊

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  I would recommend fixing the title of the page by following the tutorial from World Wide Web Consortium (W3C) - Web Accessibility Initiative (WAI). The title is the first thing that users will see on their browser's tab and it is often the information that gets pronounced first by screenreaders. So, it is important to get it right.

  Also, the alternative text for the QR code should not be hyphenated (not like code). I suggest improving the alternative text by removing those hyphens and also adding more details about the QR code. Tell the users about the QR code. This way, the users won't have to guess about it.

  To place the card in the center of the page, I recommend using a flexbox or grid. These modern techniques are more robust than absolute positioning and require less code to implement. I recommend using the body element as the main container of the card.

  I hope this information is useful! 😄

  Marked as helpful

  1

  ---

  

  HAKAZIMANA CLEMENT•20

  @Hakizimana-ClementPosted about 2 years ago

  @vanzasetia Thank u so much.I truly appreciate the reference you gave me for tutorial from World Wide Web Consortium (W3C) - Web Accessibility Initiative (WAI) and also about using flexbox or grid.

  Thank You & Happy coding! 😊

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Hakizimana-Clement No problem! 👍 Happy coding too! 😄

  1
• 

  Alexis Champion•160

  @iTwiixZPosted over 2 years ago

  Bonjour, félicitation d'abord pour ce petit projet !

  Pour la réactivité tu peux t'aider avec Flexbox ( ou bien t'aider d'un framework comme bootstrap, la documentation est complète ).

  Il y a un petit jeu disponible ici pour t'apprendre le concept flexbox : https://flexboxfroggy.com/#fr Je t'encourage pour la suite !

  Marked as helpful

  1

  ---

  

  HAKAZIMANA CLEMENT•20

  @Hakizimana-ClementPosted about 2 years ago

  @iTwiixZ Thank u so much.😊 I really appreciate the reference you gave me for using flexbox and also little game to teach me more about flex box. I like learning through games 😄😃. If there are other games to know more about, while learning coding. Would it be possible if you give me games link for learning?🙈

  Merci beaucoup !!!!! 😊 Happy coding.

  1