Boris• 2,870
@mkboris
Posted
Hi MidoGhareeb great job on completing this challenge, here are some suggestions that might be of interest to you.
- Avoid setting fixed heights and widths on elements as this will cause lots of issues with the responsiveness of your layout, the element's content and using padding should determine it's size. Use max-width or min-height if you absolutely have to.
- All content should be wrapped within landmarks. Wrap a
maintag around your container. - Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
- Media queries should be defined in rem or em not px. Also your current media query of
max-width: 450pxis making part of the card to be cut out from the view, it should be increased to aboutmax-width: 48rem768px. I will strongly recommend you consider building using mobile first workflow. Check out this resource for Responsive Design. - It's best practice linking Google fonts directly in the HTML
headsection 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.
Hope this helps.
Marked as helpful
0
Mohamed Ghareeb• 270
@MidoGhareeb
Posted
thank you very much ,you have helped me a lot@mkboris
1
