Design comparison
Solution retrospective
I found media query difficult while building. I am unsure of the responsiveness and the centering of elements.
Community feedback
- @sliyarliPosted about 1 year ago
1 - Media Queries: You've successfully implemented media queries to make your website responsive, which is great. The mobile responsiveness part is well-handled in your CSS.
2 - Centering Elements: To address your concern about centering elements, there's an opportunity for improvement. In your mobile responsiveness section, you've centered the text content within the card, which is good. However, you can enhance the alignment of the statistics section. Currently, it's stacked vertically, and you could center it horizontally by adding
text-align: center;
to the.card .stats
class. Additionally, you might consider adding some spacing between the individual statistics for better visual separation on mobile devices.3 - Aspect Ratio on Image: Regarding maintaining the aspect ratio of the image during the switch from mobile to desktop, it looks like you've used a background image with a fixed height on the
.img_bg
class. This approach might not ensure the image's aspect ratio is maintained. Instead, you could use an<img>
element and setwidth: 100%; height: auto;
to ensure the image adapts to different screen sizes while maintaining its aspect ratio. You can wrap this in a<div>
to control the background color overlay.Here's an example of how to modify your CSS for maintaining image aspect ratio:
.img_bg { width: 50%; background-color: rgba(170, 92, 219, 0.7); display: flex; align-items: center; } .img_bg img { width: 100%; height: auto; }
These changes should help you maintain aspect ratios and improve centering on mobile devices. Keep up the good work, and don't hesitate to reach out if you have more questions or need further assistance!
Marked as helpful0@sliyarliPosted about 1 year agoYou're welcome, @SeNaTu24, sure
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