Design comparison
SolutionDesign
Solution retrospective
This is my first practice here. It's wise to use bootstrap in this case but I decided to start from scratch
Community feedback
- @NikitossikPosted over 1 year ago
Hey, good job
Actually I'd like to give you some improvements:
- on 400px breakpoint the image is not responsive, you can use
max-width: 100%
to fix this - instead of using
::before
element you can use picture tag to change the path to image on different breakpoints
Good luck!
1@ArmsAndArrowsPosted over 1 year ago@Nikitossik Thank you for great advices! I didn't find out how to change path to alternate picture in picture tag, It would be great if you could suggest any docs in that case. Appetiate it!
0@NikitossikPosted over 1 year ago@ArmsAndArrows I hope this code below is what you ask for:
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" /> <img src="mdn-logo-narrow.png" alt="MDN" /> </picture>
You just add a
<source>
inside<picture>
to add an alternative image for another screen and inmedia
you type a breakpoint you needMarked as helpful0 - on 400px breakpoint the image is not responsive, you can use
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