Landing page with the background set to an svg

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Nikita, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  1.The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more adding the auto-crop property you can add object-fit: cover to make the image crop inside the container its inside.

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  2.Make the button shadow smoother by adding more blur and reducing its opacity. Here's the code for box-shadow fixed:

  box-shadow: 9px 7px 17px 4px rgb(44 39 39 / 32%);

  3.Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Nikita Toropov•310

  @tossik8Posted about 2 years ago

  @correlucas Hello Lucas, Thank you for your advice, I've changed the code as you suggested, and thank you for hinting into using relative units! I did not know about them

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Nikita, first off, great job putting this together, as it could be quite challenging with needing to position the elements and also managing the background sizes.

  About the mobile background, since it's a SVG and is thus scalable, you can try using background-size: contain to have it be resized with the width, and you can also change the background repeat to none, like this:

  body {
     background-image: url("../images/bg-mobile.svg");
     background-repeat: no-repeat;
     background-size: contain;
  }
  
  // at desktop view, you may have to change the background-size from contain to cover
  

  I notice that you inserted the whole SVG into the HTML; I normally do recommend doing this, but in this case, you can try using img with the SVG file path in the src instead to better control the width, as right now, the image can get so big that it's overlapping with the text.

  Good luck, and happy coding 🙂

  Marked as helpful

  0

  ---

  

  Nikita Toropov•310

  @tossik8Posted about 2 years ago

  @elaineleung Hello Elaine, Thank you for the suggestion. I substituted the svg tag with an img one, and was finally able to resize the img component so that the picture would look nice on narrow screens. Also, I slightly changed the background for mobile phones as you proposed and it looks just fabulous now) Thank you very much!

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @tossik8 You're welcome, glad I could help! 😊

  0