Responsive Page using CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Gvantsa, congratulations for your solution!

  I've looked your live site and I did some corrections, note that the container isn't aligned center due some lack of properties inside the body tag, you need to add display: flex; and min-height: 100vh; in order to allow the alignment and display 100% of the viewport height, see the code fixes below:

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

  Note that I've used flex-direction: column; just to align the attribution and component vertically.

  The mobile version needs that you apply a media query to change the container flow vertically with flex-direction: column I'll show the code for the media query below, check it out:

  @media (max-width: 750px) {
  .container {
      display: flex;
      width: 50%;
      /* margin: 25vh auto 2vh; */
      flex-direction: column;
  }
  

  Hope this helps you Gvantsaa, keep it up and happy coding!

  Marked as helpful

  0