product-preview-card-component

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Look cool but need some responsiveness for smaller screens after 590px. I would also add transitions when hover over the button so it looks nicer 😊

  Marked as helpful

  2

  ---

  

  Ahmed Elshennawi•70

  @AhmedElshennawiPosted almost 2 years ago

  @catherineisonline Hi Catherine, thank you for your feedback, I want to make a mobile view but how can I add it to the desktop view for check and feedback?

  thank you

  0

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @AhmedElshennawi You can simply change the flex-direction to row instead of column or flex-wrap:wrap;

  0
• 

  Els G•180

  @elsgoossensPosted almost 2 years ago

  I was looking at your solution and thanks to you I started to look up grid layout (I took 2 full courses and neither of them mentioned grid layout, so I only learned flexbox and bootstrap, gonna check out difference myself on https://www.youtube.com/watch?v=3elGSZSWTbM).

  Your solution looks good, one small tip maybe it the usage of variables for the colors and fonts so you don't need to repeat those.

  :root { --dark-cyan: hsl(158, 36%, 37%); --cream: hsl(30, 38%, 92%); --very-dark-blue: hsl(212, 21%, 14%); --dark-grayish-blue: hsl(228, 12%, 48%); --white:hsl(0, 0%, 100%); --font-montserrat: 'Montserrat', sans-serif; --font-fraunces: 'Fraunces', serif; }

  Easy to use background-color:var(--white);

  Marked as helpful

  2
• 

  Oscar Miras•160

  @omirasPosted almost 2 years ago

  I recommend you learn about media queries and responsive design.

  Also, follow along with a nice mobile-first tutorial such as this: https://www.youtube.com/watch?v=B2WL6KkqhLQ

  Marked as helpful

  0
• 

  Oscar Miras•160

  @omirasPosted almost 2 years ago

  Good work! It seems that you are missing the mobile design, tough.

  You also should implement active states when clicking the button (notice that the button becomes a darker green when clicked. Check design/active_states.jpg in the project folder).

  https://www.w3schools.com/cssref/tryit.php?filename=trycss_sel_active

  Marked as helpful

  0

  ---

  

  Ahmed Elshennawi•70

  @AhmedElshennawiPosted almost 2 years ago

  @omiras Hi Omiras , thank you for your feedback, I want to make a mobile view but how can I add it to the desktop view for check and feedback?

  thank you

  0