Landing page with the background set to an svg
Design comparison
Solution retrospective
I didn't manage to scale down the background svg for mobile devices. The svg got cropped without retaining its proportions
Community feedback
- @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
andmax-width: 100%
to the<img>
selector. To improve the responsiveness even more adding the auto-crop property you can addobject-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 itsopacity
. 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
orem
instead ofpx
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 helpful0@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 - @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 thesrc
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 helpful0@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@elaineleungPosted about 2 years ago@tossik8 You're welcome, glad I could help! π
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord