Fylo landing page

Community feedback

• 

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  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

  @PPechmannPosted about 2 years ago

  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

  @mukwende2000Posted about 2 years ago

  @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

  @PPechmannPosted about 2 years ago

  @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