All comments

• 

  Nikola Petkovic• 90

  @nikolapetkovicdev

  Submitted 8 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

  @MisterCcobD

  Posted 8 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

  @balachandranavidha2001

  Submitted 8 months ago

  

  Responsive layout using HTML, CSS

  1

  80

  

  MisterCcobD• 120

  @MisterCcobD

  Posted 8 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