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

3-column Preview Card Component designed by HTML and CSS

zeph_wā€¢ 50

@ZephaW

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Im not sure why the icon size changes when the screen size changes to my last media query. Might anyone have a solution to this?

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @ZephaW!

Your solution looks great!

You can set the size of the images manually when this happens. You can easily fix that by doing this:

šŸ“Œ Add this to your code:

.icon {
    width: fit-content;
}

If you think they're still too big, you can set fixed values, like 30px, for example.

I hope it helps!

Marked as helpful

0

zeph_wā€¢ 50

@ZephaW

Posted

Thank you @danielmrz-dev ! this worked perfectly.

Im also having a problem when i zoom in and out. the main class container moves position rather than staying in a fixed position in the body as i zoom in and out of the page (which was my intention). Might you know how i can fix this?

1

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