Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo landing page

Mukwende 1,370

@mukwende2000

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone, I need your help, I am really struggling with responsive design, I struggled with this one too, how do I go about it, I have read about fluid layouts, fluid images, and even media queries but it just doesn't seem to help because I'm having trouble implementing them. I will appreciate any feedback.

Community feedback

@Aik-202

Posted

Hi Mukwende, you did okay. I have some suggestions though.

  1. Change the div with class container to main, as every html page must have one main tag.
  2. Remove one h1 heading from your page. I suggest you remove this one with <​h1​ ​class​="​center​"​>​Get early access today​</​h1​> as they ought to be just one main heading. you can use h3 and style it the way you want.
  3. You are right, the responsiveness is not quite there. I use media queries for responsiveness. You used ​@media​ screen ​and​ (​min-width​:​ ​768​px​). What this means is that the code below it is for screens with size 768px and above, that is for ipads and desktop. That's by the way side. Although, the responsiveness is not the problem, there's a text overflow from : <​h1​ ​class​="​center​"​>​All your files in one secure location, accessible anywhere.​</​h1​> And   <​p​>​It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you. I suggest you adjust that.
  4. Then set margin:0 for the body, so that there's no visible spacing around the page.

Hope this helps, do well to update your solution when you make these changes.

Marked as helpful

1
Patrick 800

@PPechmann

Posted

Hi @mukwende2000, congrats on the solution, it's looking really good!

I see that you are already familiar with media queries. The only thing missing to make your life much easier in terms of responsiveness, is using relative units like rem or em instead of px, as these will adjust automatically, depending on the root font-size you choose. If you for example declare html {font-size: 18px} and then use, let's say 1rem for the paragraphs, that means that the paragraph will have a font-size of 18px. 2rem would be 36px and so on.

I recommend checking out this little guide to get familiar with these.

Hope it helps and looking forward to see more of your solutions!

Happy Coding :)

Patrick

Marked as helpful

0

Mukwende 1,370

@mukwende2000

Posted

@PPechmann Thank you so much Patrick, I would appreciate if you'd also help guide on the which units to use for paddings and margins.

0
Patrick 800

@PPechmann

Posted

@mukwende2000 Anytime! For paddings and margins, you can use the same rem and em units. If you then change the font-size of the root html document, the margins and padding will scale too.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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