This looks a lot smaller than the original, so try to get it much closer if you can.
I just gave lots of feedback on this challenge to someone else tonight and a lot of that will be relevant to you as well so I recommend you take a look and read it carefully.
But other items for you specifically to look at are:
- you've got the link in the wrong place in the card. Learning is not interactive, that's just a category. It's the blog title that should have a link inside the heading element.
- remove all the huge margins. Center the component using flex column properties and min-height 100svh on the body.
- I also think you're misunderstanding margins and paddings generally. This card should have padding to keep content from hitting its edges. The child elements within the card should only need vertical margins to keep them apart from each other (or the gap property in flex/grid environments). See https://fedmentor.dev/posts/padding-margin/ for more detail.
- try to make sure you Indent your code consistently so it's easier to read and spot bugs. Your code editor can even do this formatting automatically for you with prettier.
Marked as helpful
@rawatdinesh10
Posted
@grace-snow I have edited my code now as per your instructions. I have removed big margins, used button tag instead of <a> tag for 'learning'. In design file solution, there is no footer shown, but in my solution footer is showing(the last elements in html). How can I not show them in my solution.
@rawatdinesh10
Posted
@grace-snow I'm using prettier in vs code but it isn't indenting code automatically. what's the reason?
@rawatdinesh10 check your settings and select format on save or learn what command you need to do to make it format.
@rawatdinesh10 learning is not the interactive element either. Was my comment unclear? This component is meant to link to a blog so it's the blog heading that is the interactive element here. Learning is just a paragraph, it's text information not something to be clicked on.
And I don't understand what you're asking about a footer. It's good to have the attribution footer on challenges, shows respect and provides links to frontend mentor and to you.
