Design comparison
Solution retrospective
how to make it responsive with all devices
What specific areas of your project would you like help with?how to make it responsive with all devices
Community feedback
- @fayiz770Posted 5 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
Your project is well-organized and demonstrates a good understanding of HTML and CSS fundamentals. Here are some feedback points and suggestions for improvement:
HTML
Semantic Structure:
The HTML structure is clear, but consider using semantic tags like <main>, <header>, <footer>, etc., to improve readability and accessibility.
Accessibility
Adding alt attributes to images is crucial for accessibility. For example:
<img src="img/avatar-jessica.jpeg" alt="Profile picture of Jessica Randall" />.
Button Links
If the buttons are meant to link to external profiles, using <a> tags styled as buttons would be more semantically appropriate.
CSS
General Styling
The overall styling is good, but there are some areas for improvement to enhance responsiveness and consistency.
Container Alignment
Use Flexbox to center the .all container within the body. This will help with alignment and responsiveness.
Font Import
The font-family should be applied to the body tag to ensure consistency across all elements.
Responsive Design
Ensure that the container scales well on different screen sizes. Use percentages and flexible units (like em or rem) instead of fixed pixel values where possible.
Improved CSS
Here's an improved version of your CSS with these suggestions applied first of all, I want you to try yourself to do this stuff, but if you are stuck come to my solution OK?
/* General Styling */ body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: hsl(0, 0%, 12%); font-family: 'Inter', sans-serif; } /* Main Container */ .all { background-color: grey; padding: 20px 20px 30px; border-radius: 8px; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); width: 100%; max-width: 320px; margin: 0 20px; /* Responsive padding for small screens */ } /* Image Styling */ img { width: 70px; height: 70px; object-fit: cover; border-radius: 50%; margin-bottom: 16px; /* Consistent spacing */ } /* Text Styling */ .nom { color: hsl(0, 0%, 100%); font-size: 20px; font-weight: 600; margin-bottom: 8px; } .location { color: hsl(75, 94%, 57%); font-size: 12px; margin-top: 0; margin-bottom: 16px; /* Consistent spacing */ } .job { font-size: 14px; color: hsl(0, 0%, 100%); margin-bottom: 24px; /* Consistent spacing */ } /* Button Styling */ .btn { background-color: hsl(0, 0%, 20%); color: hsl(0, 0%, 100%); font-size: 14px; font-weight: 600; width: 100%; max-width: 250px; height: 40px; border: none; border-radius: 8px; text-align: center; margin-bottom: 8px; cursor: pointer; /* Pointer cursor for better UX */ } .btn:hover { background-color: hsl(75, 94%, 57%); /* Add hover effect for better UX */ color: hsl(0, 0%, 20%); } /* Responsive Design */ @media (max-width: 375px) { .nom { font-size: 18px; } .location { font-size: 10px; } .job { font-size: 12px; } .btn { font-size: 12px; height: 36px; } }
Key Changes and Improvements
Flexbox for Centering
The body now uses Flexbox to center the .all container. Container Width:
The container's width is set to a maximum of 320px, making it more responsive.
Consistent Spacing
Improved margin and padding for consistent spacing between elements.
Button Styling
Added cursor: pointer to buttons for better UX and a hover effect to enhance interactivity.
Font Sizes
Adjusted font sizes for better readability and responsiveness.
Media Queries
Included media queries to adjust font sizes and button sizes on smaller screens.
Final Thoughts
Your project is well on its way to being a polished and responsive component. Implementing these suggestions will enhance the usability and accessibility of your design. Keep up the great work!
If you find this helpful, please mark this helpful Thanks
Marked as helpful1
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