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 ❤️

Jishan 290

@jish0101

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Pulkit-s21

Posted

There are a lot of issues in the code.

  1. Color the background instead of making a box.
  2. There is no image in the mobile version of your code
  3. The button is in the middle of the box and not at the end. The components aren't spaced evenly and stick together in desktop version

Marked as helpful

1

Jishan 290

@jish0101

Posted

@Pulkit-s21 Thanks, i tried to change it again, see if it looks better?

0

@Pulkit-s21

Posted

@jish0101 The image is there in the mobile view as well now so kudos on that. Try to set the body min-height to 100vh so that the color is all the way through cause rn it falls shorts and set a max-width for the card in the mobile view like 35em or something like this before it changes to desktop view because it keeps on stretching to the size of the screen and doesnt look that nice. With a fixed max-width it wont span too much and look like a neat card

1
Jishan 290

@jish0101

Posted

@Pulkit-s21 done!

0
Wangai 410

@WangaiJM

Posted

Apply the background color to the body rather than the outer-container or fill the body with the outer-container

.outer-container{
   width: 100%;
   height: 100%
}

Marked as helpful

0

Jishan 290

@jish0101

Posted

@WangaiJM done! thanks😊

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