Design comparison
Solution retrospective
Hello! I'm a noob trying to complete another challenge. I thought this one would be straightforward, but I experienced some difficulty creating the borders around the icons. Am I doing it right or should I just find icons that already have a border just like the ones in the design? Also, I feel like I have to do a lot of minute adjustments to the mobile layout. Is there any way I can do it more effectively? Thank you so much for your valuable input!
Community feedback
- @correlucasPosted over 2 years ago
๐พHello my friend Charmonder, congratulations for you solution, as aways a really good one.
I've found some issues with the desktop background while it scales down, after
width: 1000px;
sometimes the background doesn't fill the screen fully. I did some fixes in your code adding some background properties to keep the background always full screen:.container { background-color: hsl(257, 40%, 49%); background-size: cover; background-image: url(images/bg-desktop.svg); background-repeat: no-repeat; }
Note that the
h1
heading isn't center aligned due themax-width
you've set mobile to keep the heading line break, to do this alignment you need to add some margin in order to keep it center, see the code below:h1 { margin: 0 auto; }
The best way to manage these icons without a need to create the additional rounded border is export the svg as a single element, convert the svg icon into
path
or use some icon library like bootstrap. I did this challenge and I've used the path method to allow me to do changes to the icon as a single element, if you want to know more here's the link:https://stackoverflow.com/questions/68294434/how-to-handle-complex-svg-as-a-single-path-element
Hope it helps you my friend, and keep it up! You're improving a lots.
Marked as helpful1@charmonderPosted about 2 years ago@correlucas Hi Lucas! Thank you for your comment. I took some time off from coding and just getting back in now. Hope I still remember what I've learned and the great tips you've given me!
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