Design comparison
Community feedback
- @Magic1vyPosted over 1 year ago
Hello, @mannyAndem! 👋
You did an amazing job in this challenge!
Here are some tips that you can find helpful for improving your code:
1.In your
"gallery-section"
, you can use the<picture>
tag to provide different images for different device widths instead of using 2 separate<img>
tags. You can learn more about this tag here 📗2.To speed up website loading times, it's better to import Google Fonts in the HTML file rather than in CSS. You can read more about this in this article 📙
3.Use shorthand properties in your CSS background, like this:
.photography { background: url("images/mobile/image-photography.jpg") no-repeat / cover center; }
instead of:
.photography { background: url("images/mobile/image-photography.jpg") background-size: 100%; background-repeat: no-repeat; background-position: center; }
The
/cover
value sets thebackground-size
to"cover"
and the other properties are self-explanatory.4.When changing the background image in media queries, use only
background-image
instead ofbackground
to avoid applying other properties in the background shorthand by default. You can learn more about shorthand properties in CSS from this article on MDN Web Docs 📘I hope you find this helpful! Happy coding!
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