All comments

• 

  Nikola Petkovic•90

  @nikolapetkovicdevSubmitted 10 months ago

  I find difficult how to position photo of QR Code and text in a container. I'm unsure in a all CSS code.I'm not sure how it even works.

  

  Responsive landing page using CSS Grid

  1

  70
  

  MisterCcobD•120

  @MisterCcobDPosted 10 months ago

  In this case, i really don't think margins will help. Try flex on .container's parent also to center everything. Aaand, why used the positioning? Try live site on your phon(s) also to see if it resembles the requirements. Is one thing to check viewport size and completely different when you check on a phone in some cases.

  body {
      background-color: hsl(212, 45%, 89%);
      min-height: 100vh;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .container {
      max-width: 350px;
  /* padding: 1rem; */
      background-color: hsl(0, 0%, 100%);
      text-align: center;
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  Marked as helpful

  0
• 

  Balachandra navidha•20

  @balachandranavidha2001Submitted 11 months ago

  

  Responsive layout using HTML, CSS

  1

  80
  

  MisterCcobD•120

  @MisterCcobDPosted 11 months ago

  Hey buddy, Nicely done and i hope you don't mind, i would add something that has given to me also

  body {
  .../...
    align-items: center;
    min-height: 100vh;
  }
  

  And i would personally remove the margins from either resolutions and maybe try revers the media query with something like

  .main-container{
  .../...
  width:75%
  }
  @media screen and (min-width: 450px) /* obtional (min-height:450px)  */ and (orientation: landscape)
  .main-container {
      width: 25%;
  }
  ```
  

  Marked as helpful

  0