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

My attempt to the Product preview card component challenge. HTML/CSS

Ruthwik 190

@web-devie

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


First of all, thanks for passing by :)

  1. I have built this project using flex and I am sure it can be built using "grid" but I don't know how to layout using grid. Question: I have a question what affect does laying in grid regarding this project. Is the affect minimal or huge?

  2. I have struggled my bit using media queries as well when it comes div with class name "attribution" I can't position it according to screen size. Can anyone help me with that?

3.Any kind of feedback is highly appreciable. Have a glance at my code and suggest what I could have done better to achieve a better version than this. Thanks!

Community feedback

@PiyushJain01

Posted

Hi 👋 In this media query@media screen and (min-width: 365px) and (max-width: 750px) the mobile design is showing only between 365px and 750px but if the screen size is less than 365px then again the desktop design is showing. So instead of this you can write @media screen and (max-width: 750px).

For Attribution you can use text-alignproperty instead of position :absolute; to align the text in center.

.attribution{
     font-size: 14px;
    font-family: Montserrat;
    text-align: center;
} 

I hope this will help you. Happy Coding :)

Marked as helpful

1

Ruthwik 190

@web-devie

Posted

@PiyushJain01 Thank you so much, that really helped :)

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