Design comparison
Solution retrospective
This is my attempt at the Fylo Landing page. I need some advice as to positioning content on the page, I feel like i'm missing something, I am currently possitioning content by using margin: .... to push items where I need and this works fine for mobile or desktop by it's self but I find after I add media queries to make it responsive I find I have to add even more margin: .... lines and padding or even adding minus margins which feels very counter productive. Any advice as to topics or video suggestions to help me figure out better positioning methods would be awesome, and any advice on my code or ways i could simplify it would be awesome. Thanks!
Community feedback
- @Nghuynh07Posted over 2 years ago
Hey @RJC26
Very nice job on completing the project. Here are my suggestions:
For section_1: Set object_fit: cover; on the img_1 class. This ensure that the aspect ratio of the images remains the same within its container as it shrinks or expand. Here is https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit for extra information.
For section_2: Try putting width to 100% instead of 65% for card class. You might need to adjust the media queries at about 796px. Right now your media queries is at 799px max-width for section_2. I would maybe do it even before that because the text_2 looks kind cramp.
I played around with it a little bit. I hope this help. Over it looks good. Very nice job.
Marked as helpful1@RJC26Posted over 2 years ago@Nghuynh07 Awesome thanks man! I will definately check these out!
0
Please log in to post a comment
Log in with GitHub
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