Submitted almost 2 years ago

https://nasershareef.github.io/Practice-Frontend-Dev-8/

Yahya Shareef• 150

@yahyashareef48

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

again i was unable to make it responsive. i don't know where i am wrong

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted almost 2 years ago

Hi, @nasershareef! 👋

First, the URL for the repository is https://github.com/. It should be the URL of the repository of the project. So, update the URL with the correct one.

Now, for the responsiveness of the site, I recommend making the following changes to improve it.

Remove height: 100vh from the <body>. Instead, set min-height: 100vh to it. This way, it allows to grow if the content needs more height.
Remove width and height from the <main>. Instead, set max-width to prevent it from becoming very large on wide screen sizes. For the height of it, let the elements inside it control the height of it.
Remove height from the .card-grid. The reason is the same as setting the height to the <main>.
Use rem unit for padding. Using percentage units can lead to unexpected results on tiny or wide screen sizes.
In general, you want to avoid setting width and height to any elements. Those properties can make the elements become not responsive.

I hope you find this useful.

Marked as helpful

Vanza Setia• 27,795

@vanzasetia

Posted almost 2 years ago

@nasershareef

Learn more about responsive design — Responsive design ground rules | Polypane, The browser for ambitious developers

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

Hello nasershareef, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!

to solve this problem do this:

<a href="/" class="learn-more-btn">Learn More</a>

I noticed that you used more than one h1 in this component, this is not a good practice since we should have only one h1 per page, to improve it, prefer to change all the h1 by an h2!

For a user to know that an element is clickable we need to use the cursor property with the value pointer!

The remainder is excellent.

I hope it's useful. 👍

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