Submitted over 2 years ago

HTML, CSS

Kourosh Riahidehkordi•10

@Kooroshoo

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What did I find difficult while building the project? I couldn't get rid of the small gap between the image and the bottom of the container

Which areas of my code I am unsure of? The way I implemented the image swap when switching to mobile devices. Not sure if this is the correct way to do it.

Do I have any questions about best practices? Any feedback about my implementation which can be improved upon is welcomed.

Community feedback

Raj Prasad Sanjel•980

@RajSanjelPosted over 2 years ago

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

Instead of that big line make it

*{
margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

And that little space is because of line height in line 31 make it 0 and it will look as you expected. Hope this helped.

Marked as helpful

Please log in to post a comment

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