responsive page using flexbox

Community feedback

• 

  Ashong•930

  @AshongAbdallah06Posted 10 months ago

  Hi. You can copy this link into your html file

  ***<link rel="preconnect" href="https://fonts.googleapis.com">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;400;700&display=swap" rel="stylesheet">***

  And then in the body, call font-family: 'Outfit', sans-serif;.

  Marked as helpful

  2
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @aziz712!

  Your solution looks great!

  I have a suggestion for improvement:

  • For semantic reasons, use <main> to wrap the main content instead of a <div>.

  📌 This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1

  ---

  

  Mohamed Aziz Slama•70

  @aziz712Posted 10 months ago

  hello @danielmrz-dev thank you for your help its so important for me just can you explain more please why main

  1
• 

  Alberto Ledesma•370

  @ledesmxPosted 10 months ago

  Hi @aziz712 👋

  Great job on your solution!

  Here are some recommendations for you:

  • There is a better approach to try to center the card. You can use Flexbox along with justify-content: center; and align-items: center; to center anything. For this approach is necessary to set the height to 100% of the viewport, I suggest using min-height: 100vh; to achieve this, like so:

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /*Add this*/
  }
  

  • Make sure to remove the margin-top of the .box.
  • Lastly, I suggest adding a box-shadow to the .box to add a subtle pretty shadow surrounding the card.

  In summary, I suggest adding this code:

  body {
    min-height: 100vh;
  }
  .box {
    box-shadow: 0 5px 15px 10px rgba(0, 0, 0, .1);
  }
  

  And removing this one:

  .box {
    margin-top: 10%;
  }
  @media only screen and (max-width: 375px) {
    body {
      margin-top: 110px;
      display: flex;
      flex-direction: row;
    }
  }
  

  I hope this helps a little.

  Well done for the rest.

  Marked as helpful

  1
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="box"> to a <main class="box">
  • I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
  • I leave you the task of researching the reset CSS and the box-sizing: border-box
  • If you didn't apply the reset, you can add margin: 0 to your body, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply the margin again using media querys
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
  }
  

  Marked as helpful

  0