Latest solutions
REST Countries API | ReactJS, Bootstrap, framer motion
#bootstrap#framer-motion#react#styled-componentsSubmitted over 2 years agoURL Shoterning API HTML, Sass, Bootstrap, Vanilla JavaScript, Webpack
#sass/scss#webpack#bootstrapSubmitted over 2 years ago
Latest comments
- @ishanlearnsprogSubmitted almost 2 years ago@sn-tinPosted almost 2 years ago
Congratulations on successfully finishing this challenge 🎉
I just have a few recommendations to help you improve your solution.
First, I noticed that the icons for clock and ethereum has been stretched. This is because the
align-self
default value isstretch
. There are two ways to fix this:Solution 1:
.imgp img { align-self: center; }
Solution 2
.imgp { display: flex; gap: 5px; align-items: center; }
Then, when hovering over the image, I think it would be best to have the
cursor: pointer
.Nevertheless, the solution you submitted looks great! 😊
Marked as helpful1 - @eljobnmSubmitted almost 4 years ago@sn-tinPosted almost 4 years ago
I added it in the body part of css by using: background-image: url(../images/bg-desktop.svg); background-repeat: no-repeat; background-size: cover;}
I did the same for the mobile size but changed the image to: background-image: url(../images/bg-mobile.svg)
I also changed the size to: background-size: contain
and then I added background-position: center top;
I hope this helps.
0