Submitted almost 2 years ago

Fylo Landing Page

Ryan• 290

@RJC26

Preview site View code

This is a solution for...

Fylo landing page with two column layout

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

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

Huynh Nguyen• 430

@Nghuynh07

Posted almost 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 helpful

Ryan• 290

@RJC26

Posted almost 2 years ago

@Nghuynh07 Awesome thanks man! I will definately check these out!

Please log in to post a comment

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