Boris• 2,850
@mkboris
Posted
Great work @CannyRo here are some suggestions
- Avoid setting fixed
heights
andwidths
on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, usemax-width
ormin-height
. Currently, the .card isn't responsive on small screen sizes, change thewidth
of the .content tomax-width
. Also remove theheight
completely from the .card__header - The
position: absolute
you set on thefooter
is causing an overlap with the card, remove it. Also, there is a typo with thefont-size: 0,875px;
declaration you put a,
instead of a.
- Remove the
.card-img
declaration in the media query declaration because it is causing the image not to take it's full width and doesn't align with the overlay when hovered. - Every page should have at least one heading element typically an
h1
element to provide a clear structure. The .card__title should be a Heading Element - It's best practice linking Google fonts directly in the HTML
head
section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times. - Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
1