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

Godstimeβ€’ 330

@iceberg61

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


πŸ‘Ύ Hello, Frontend Mentor coding community

This is my solution for the Social proof section challenge. TWEAKS πŸš€:

Hover effects

πŸ‘¨β€πŸ”¬ Follow me in my journey to finish all challenges (HTML/CSS/JS) to explore solutions that aspires everyone with custom features and tweaks

Ill be happy to hear any feedback and advice!

Community feedback

vinu cyrilβ€’ 980

@vinuman

Posted

Hello there,

The design looks awesome and congrats on completing the same.

  • Under your media query, please do increase the max-width value so that the page becomes responsive on medium size screen as well. A max-width of 768px would work well here.

  • Your CSS code quality looks really good. Good luck and happy coding!!

Marked as helpful

1

Godstimeβ€’ 330

@iceberg61

Posted

@vinuman Thanks man... And could you tell me why you choose 768px for the media query.✌️✌️

0
vinu cyrilβ€’ 980

@vinuman

Posted

@iceberg61 Hi there, 768px is recommended by Tailwind docs for medium size screens.

https://tailwindcss.com/docs/screens

😊

Marked as helpful

1
Godstimeβ€’ 330

@iceberg61

Posted

@vinuman I see I haven't used tailwind before Amma go check it out 😁✌️ Peace man

0
Roan Macmillanβ€’ 820

@RoanMacmillan

Posted

Nice one looks good!

I noticed there is an issue when hovering over the buttons; the container seems to grow a bit. You could try this instead:

button {
    font-weight: 700;
    border-radius: 30px;
    color: inherit;
    border: 2px solid white;
    padding: 1rem 3rem;
    background-color: var(--color-Very-light-gray-background-headings-buttons);
}


button:hover {
    background-color: inherit;
    cursor: pointer;
    color: var(--color-Very-light-gray-background-headings-buttons);
}

Marked as helpful

1

Godstimeβ€’ 330

@iceberg61

Posted

@RoanMacmillan Yh I noticed that to....πŸ˜… Will go try it now

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