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

Responsive landing page usign CSS Grid

Askan Ken 60

@askan-ken

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


It's difficult to figure out how to remove the gap on the bottom card. There is a white gap on the bottom of the card that took me an hour to figure out but I can't find the solution.

I'm a complete newbie here and would appreciate any assistance.

Community feedback

yishak abrham 2,150

@yishak621

Posted

hi ken congrats for completing the challenge two basic things i want to comment about are 1]the scale of the card is too big it fits the ahole screen so you should decrease it like these ...go to the main container for the card and transform:scale(0.7) and also u didn't design for small screens (mobile version)...the main challenge for this specific project is to design responsive card for pc version(1row with 2column grid) and for mobile(1column with 2rows) and the images for each version is different in the images folder u will find two images for two source sets ...these practical challenge helps me to practice how to set a resolution switching image according to the screen sizes so we have given two diffrent images 1x and 2x for small and wider screens so whenever the screen size changes from 750px the image we provide will be changed automatically! these is how it is done <picture> <source srcset="images/[email protected] 750w, images/[email protected] 1200w" /> <img src="images/[email protected]" /> </picture> beside the card grid layout will be change from 1x2 to 2x1 for mobile versions ! and also it have something to practice on text-decoration property for price tag we must put line-through and the thickness should be very thin `<div class="old__price">

<h2 class="old__price__tag">$169.99</h2> </div>`

.old__price__tag { font-weight: 400; text-decoration-line: line-through; text-decoration-thickness: 0.1em; }

Marked as helpful

0

Askan Ken 60

@askan-ken

Posted

@yishak621 Thank you for your help.

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