What are you most proud of, and what would you do differently next time?
Now it's time to dive into Responsivity and how to do it. This time I tried go into "mobile-first approach". And I heard your feedbacks in previous challenges. Now There are more max-width and max-height compared than before. There's still some in the code if you read it, but it's better than before;
I used the initial value in width and height in the media query of the desktop and the overflow: hidden to make the image get cropped and yet maintain its non-round corners.
Oh, and I also finally wrote my first `````` tag. Such a moment...
What challenges did you encounter, and how did you overcome them?
I struggled with the SVG. I usually go and paste svgs icons as inline because my IDE randomly decides just not to load SVG files, there wasn't any issue with that, the problem was that it wasn't scaling properly. So I added a viewbox to the icon because there wasn't. Yet it wasn't scaled so after that I just used transform: scale(); and call it a day. I also changed the fill attribute to match text's color, but I think I could do it in CSS anyway even if it was in a separated file.
What specific areas of your project would you like help with?
Sometimes when the page is reloaded in desktop, the image is replaced by the mobile image. What is needed to make that replacement don't happen?
@WhitezerD
Posted
Hi, good work so far. -I notice that you didn't remove the <div class="attribution> at the bottom. -And for future projects you might considering use CSS reset which will help you overwrite default html margin, padding, box-sizing model and furthermore benefits. Here's the link : https://www.joshwcomeau.com/css/custom-css-reset/
Marked as helpful
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
