Design comparison
Community feedback
- @LucieLuBPosted 3 months ago
Good job, Here's some feedback on your CSS code:
@import for Google Fonts:
The @import statement is fine, but you might consider using a <link> tag in the HTML for performance reasons, as it loads the fonts faster and prevents blocking styles. Body Styles:
place-items and place-content: These are invalid in this context because they only work within a grid or flexbox container. You should use display: flex; along with justify-content: center; and align-items: center; to achieve centering. Consider adding margin: 0; to the body to remove default margins. Image Styling:
Using width: auto; and height: auto; is redundant, as the image already maintains its aspect ratio by default. You can safely remove them. The max-width: 200px; is useful, but depending on the design, consider adding a media query to adjust it for larger screens. Shape Containers (.shape-container, .inner-square-shape, .outer-square-shape):
The display: flex; properties in both the .shape-container and .outer-square-shape are well-implemented, but ensure you’re intentional with the use of flex-direction: column;. If these shapes need to be horizontally aligned on larger screens, consider a media query to adjust the layout. The padding and margin between .outer-square-shape and other elements seem fine, but you might want to test how they behave responsively. Text Styling (.text-style1, .text-style2):
The styling is consistent with the rest of the design and works well with font-family: 'Outfit', sans-serif. You’ve appropriately adjusted font weights and sizes. The width: 170px; applied to both text styles may cause issues in smaller screens. Consider using percentages or max-width for responsiveness. Good use of line-height for readability. Media Queries:
@media (min-width: 1440px): The intention of setting the body width and centering it is good. However, consider using a more flexible layout system (like grid or flexbox) to handle different screen sizes rather than fixing the body width to a specific pixel value.
Marked as helpful0@Davidty143Posted 3 months ago@LucieLuB thank you so much for your comment, this is very helpful for me starting to learn this leanguage
0@Davidty143Posted 3 months ago@LucieLuB Applied some of your suggestions, still trying to learn more about responsiveness on different resolutions. Thanks! :)
0
Please log in to post a comment
Log in with GitHubJoin 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