Design comparison
SolutionDesign
Solution retrospective
A very simple one, but Took a lot of Time, currently Practicing CSS, so any feedback on how I can improve further on reducing my CodeBase. I've written a lot more code than needed. So, any suggestion will be helpful.
Community feedback
- @hitmorecodePosted over 1 year ago
Nice well done. Just a few tips
- To switch pictures between desktop and mobile, try to use the picture element. This way you don't have to hide one and show it with css.
- As for the headers switch the
h1
andh3
.h1
should always be the title of the page / name of the product etc... - On price span you should use flexbox to align current and old price.
<picture> <source media="(min-width: ...px)" srcset="image for desktop"> <source media="(min-width: ...px)" srcset="image for mobile"> <img src="./images\image-product-desktop.jpg" alt="perfume-bottle" class="main-image"> </picture>
Marked as helpful1@fat-hiaPosted over 1 year agoI like the tip about using pictures as I relied on hiding and displaying images in my solution, I'll give it a try ASAP! Thanks :) @hitmorecode
0 - @KingPhredPosted over 1 year ago
Hello Durga, I have just gone through your code and I all I can say is that the length of code written is alright.
Keep it up👍
Best Regards
1
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