Html,Css,Github

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted 17 days ago

  Hi nabhoneel, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

  To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

  • Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

  • Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

  Feel free to choose one of the two!

  The rest is amazing.

  I hope this is helpful. 👍

  1

  ---

  

  nabhoneel•20

  @bluesky0-0Posted 15 days ago

  @AdrianoEscarabote Hey man really helpful i will keep that in mind.

  1
• 

  Martin Liesche•550

  @marliedevPosted 18 days ago

  Looks good but have a look at flexbox to position alements horizontal/vertically centered. This way (and there are other ways too) you dont have to use absolute positioning, which is always tricky to handle when it comes to responsive design.

  BUT, a little change in your code and it works also with your way:

  .container {
      position: absolute;
      left: calc(50% - 1rem); // calc position - margin
      top: 50%;
      max-width: 452px; // instead of a fixed width
      width: calc(100% - 2rem); // calc width - margin * 2
      margin-inline: 1rem; // added some margin
      transform: translate(-50%, -50%);
      background-color: white;
      border-radius: 20px;
      overflow: hidden;
  }
  

  1

  ---

  

  nabhoneel•20

  @bluesky0-0Posted 18 days ago

  @marliedev Hey thanks for letting me know will try this this in other projects

  0