Submitted almost 3 years ago

3 Column Preview Card Component

Ishita Bisaria• 40

@IshitaBisaria

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

FeedBacks and Suggestions are welcome!

Community feedback

Ken• 4,915

@kens-visuals

Posted almost 3 years ago

Hey @IshitaBisaria 👋🏻

I have a quick tip for the icons. I suggest adding aria-hidden="true", because they're for decoration only. For example, <img src="images/icon-luxury.svg" alt="" aria-hidden="true" class="logo">. You can read more about aria-hidden here.

I hope this was helpful 👨🏻‍💻 overall, you did a great job, just tweak media-query sizes a bit. That's it from me, cheers 👾

Marked as helpful

Ishita Bisaria• 40

@IshitaBisaria

Posted almost 3 years ago

Hey @kens-visuals , Thank you so much for the suggestion. I have updated the aria-hidden = "true" in the img tag in html. I have also updated the media-query size. Thank you so much :)

Ken• 4,915

@kens-visuals

Posted almost 3 years ago

@IshitaBisaria you're welcome 😇

Fidel Lim• 2,775

@fidellim

Posted almost 3 years ago

Hi Ishita,

Great work finishing the project! Just some suggestions you can apply:

you can add cursor:pointer to the buttons so that the user knows that it can be clicked.
for your media query, it would be better to increase is as some of the component is hidden. you can set the media query to @media (min-width: 900px) instead.

I hope it helps. :)

Marked as helpful

Ishita Bisaria• 40

@IshitaBisaria

Posted almost 3 years ago

Hey @fidellim , Thank you so much for the suggestions. I have updated the cursor as pointers. Regarding the media queries, it was actually given in the style guide that Mobile width is 375px. Thanks you so much :)

Fidel Lim• 2,775

@fidellim

Posted almost 3 years ago

@IshitaBisaria No worries :) Regarding the mobile width, you can still adjust it to anything other than 375px. If you would want to make your site available to most devices, it would be great to be made responsive. But I would assume you already know that hehe. Good luck with your other projects :)

Marked as helpful

Ishita Bisaria• 40

@IshitaBisaria

Posted almost 3 years ago

@fidellim Yes, Sure :)

Muhammad Fadll• 320

@fadelun

Posted almost 3 years ago

great, no issues detected

Marked as helpful

Ishita Bisaria• 40

@IshitaBisaria

Posted almost 3 years ago

@fadelun :)

Muhammad Fadll• 320

@fadelun

Posted almost 3 years ago

hi @IshitaBisaria ,i have seen your css, why you write @media query min-width twice?

Marked as helpful

Ishita Bisaria• 40

@IshitaBisaria

Posted almost 3 years ago

Hi @fadelun , U can write all the styles of Media Query in a single media query too! I too have merges the media queries.

Please log in to post a comment

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