CSS Flex , CSS Grid , JavaScript

Solution retrospective
This is my first time learning and trying to use responsive layout. I omitted the height settings and set the width to max-width
. I used media queries and frequently utilized rem
and em
, but I still haven't fully mastered the coordination between rem
and em
. I will pay more attention to adapting to their usage in the future.
I mistakenly remembered middle
as center
for vertical alignment, which frustrated me for quite some time. Additionally, regarding responsive layout, I heard that the ideal approach is to adjust the font size of the elements themselves to adapt to mobile web pages. However, I didn't use this method and instead wrote a lot of code in the media queries.
I noticed that when I inspect the webpage on my computer, the responsive design works perfectly. However, when I open it on my actual phone, it seems like the responsiveness doesn't work at all, which is really frustrating to me. Additionally, regarding line breaks, I'm not sure how to control when to break lines, and on the mobile side, it seems to follow a completely different line-breaking behavior.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on arcueid-x's solution.
Join 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