Order Summary

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Adrian, congratulations for your new solution!

  Here’s some tips to improve your component design:

  1.Add background-size: contain; to make the background display its size as full width look that now its displaying the size cropped, an alternative is to use give the background size as background-size: 125% but contain is a better alternative.

  body {
      background-size: contain;
      font-family: 'Red Hat Display', sans-serif;
      background-color: var(--background-color);
      background-image: url(images/pattern-background-desktop.svg);
      background-position: top;
      background-repeat: no-repeat;
      color: var(--Dark-blue);
  }
  

  Something that can be a time saver for you is to use a CSS RESET to remove all default settings for margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  ✌️ I hope this helps you and happy coding!

  1

  ---

  

  Adrian•160

  @AdrianmbuguaPosted about 2 years ago

  @correlucas Thanks man will definitely look into it !

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @Adrianmbugua you're welcome Adrian, keep it up

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @Adrianmbugua you're welcome Adrian, keep it up

  0