Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview card - Responsive (Third project)

csut1337 30

@csut1337

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I initially planned to do this project as a means of practicing Bootstrap while I learn enough JavaScript to begin implementing that in projects. I've found pretty quickly that I prefer my own CSS/layout to Bootstrap, however. It still ended up being the right project to undertake as the responsive components were much more elaborate than the last (Equilibrium) project I did.

  • The images in both desktop and mobile views do not quite fill the container (they both have a white line on top that I was struggling to remove entirely). I tried a number of ways around this without any luck. Any suggestions?

  • I've seen 'mobile-first' tags in the readme's for a few of these projects but I normally tackle desktop first and then media query for mobile (using the <picture> tag in this project was the first time I've not entirely done that). Is this a preferential thing or considered best practice and I'm not aware?

Or if there is anything else I missed that warrants commenting, of course! Thanks in advance!

Community feedback

@Ikuewumi

Posted

Hi✋. Awesome Project. About your questions, here are my suggestions:

  • In manipulating an image, especially its dimensions without squishing the image, I don't think you'll find a better solution than the css object-fit property / family of properties. You can read more on this on the MDN website, but you could use it like so:
selector {
	object-fit: cover;
	object-position: top left;
	width: 300px;
	height: 100%;
}
  • The mobile first approach is popular because generally, you don't have to do a lot to build the mobile version of a site (it usually just involves stacking the contents on top of one another) and it is inherently responsive. So the idea is to write the mobile-first styles, then use Grid or flex to add complexity to the layout as needed.

I hope you find these helpful. Overall, great project. Feel free to ack more questions and keep coding👍,

Ayobami

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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