Design comparison
Solution retrospective
Making the website responsive was a big hurdle, I ended up writing two sets of CSS code using media query for mobile and desktop. But still for a tiny bit of resolution when it switches from mobile to desktop the image doesn't maintain the aspect ratio, please point out my mistake and let me know how should use the breakpoints instead of writing a whole set of CSS codes twice
Community feedback
- @DivineUgorjiPosted about 1 year ago
Congratulations on finishing this challenge🎉 🎉 Your implementation is close to the design.
However, I have a few ideas for improvement on the project.
-
I see that you have different media queries for this project, and I think that is a little bit too much for a simple project such as this. It is generally recommended to always start your projects with the mobile workflow first, then use a media query to make the desktop view, only changing the aspects that need to be changed. This approach helps to enhance responsiveness on mobile views which is important as the majority of users access the web using their mobile devices, it also helps to reduce writing redundant code and repeating yourself many times.
-
I also observed that you used a lot of CSS positioning properties for this project,
flex-grow
andflex-shrink
, which is good, however, that is a lot of tweaking. You can achieve this design and also have it responsive if you move the picture element containing your mobile and desktop images to the top of your HTML structure. Then, use the flexrow-reverse
property in your desktop view to place the image on the right side. -
Set your image height to
auto
in your CSS styles to help it maintain the aspect ratio irrespective of the height of the container which in this case is the picture element. -
Also, the opacity for the images is
0.75
instead of0.3
. This helps you to achieve the right color blend mode for this project. -
I also observed that your flex-group items are smaller than what is provided in the design in the desktop view, please ensure to add a custom style for the flex-group to make them a bit bolder in your desktop view media query.
-
Overall, your solution is good, and I hope these few suggestions help you to improve it even further.
Happy coding, and may the force be with you! 💪
Marked as helpful0 -
- @sliyarliPosted about 1 year ago
You've done a great job in creating a responsive design for your Stats preview card component. I understand your concern about maintaining the aspect ratio of the image when switching between mobile and desktop views. Here's how you can achieve that without writing two sets of CSS rules:
1 - Use a Single CSS File: Instead of maintaining two separate sets of CSS rules for mobile and desktop, you can use a single CSS file with media queries to target specific screen sizes. This will make your code more maintainable.
2 - Aspect Ratio for Images: To maintain the aspect ratio of the image, you can use the
aspect-ratio
property. This property is especially useful for responsive design. Here's how you can apply it to your image:img { aspect-ratio: 16 / 9; /* Set the aspect ratio to 16:9, adjust as needed */ max-width: 100%; border-radius: 0 0.5rem 0.5rem 0; }
By setting the aspect ratio to 16:9, the image will maintain this aspect ratio regardless of the screen size.
3 - Simplify Media Queries: Instead of specifying
min-width
andmax-width
in separate media queries, you can use a combination ofmin-width
andmax-width
within the same query to target a specific range. For example:@media screen and (min-width: 601px) and (max-width: 927px) { /* Styles for tablets and smaller desktops */ }
This way, you can create more granular breakpoints without duplicating code.
By applying these changes, you can maintain the aspect ratio of the image while simplifying your CSS and making it easier to manage in the long run. Your code looks clean and well-structured, and with these adjustments, it will become even more efficient. Great job!
Marked as helpful0
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