fylo-landing-page-with-two-column-layout-master using grid

Community feedback

• 

  Adriano•38,160

  @AdrianoEscarabotePosted about 2 years ago

  Hi anass sanba, how are you?

  I really liked the result of your project, but I have some tips that I think you will like:

  I noticed that the content is stretching a lot at higher resolutions, to solve this we can do the following:

  we will use two divs, one that goes the content and the max-width and margin: 0 auto;, but for the background images not to break, we will put a parent div of this content div and apply the background images to it!

  If you have any questions, answer this comment and I'll explain better!!

  The rest is great!!

  Hope it helps...👍

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hey Anass, great solution I think there are really few things to fix here. Good Job!

  I dont know, but for some reason the second image in the second block is going out the container, to fix that you can use a simple 2x grid, with grid-template-column: 1fr 1fr to keep the image separated from the block of content and use display: flex with flex-direction: column: reverse for the mobile version. Its more simple than using grid-area just the good and old 1fr 1fr for a double column div.

  To reduce your css file and improve the performance loading your page you can use a tool called css minify that reduces the css code removing the unnecessary characters. You can use a VSCode plugin called minify css or this website tool to reduce your code: https://www.toptal.com/developers/cssminifier

  To save your time you can code you whole page using px and then in the end use a VsCode plugin called px to rem heres the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  Keep it up and post more good challenges =)

  Marked as helpful

  1
• 

  anass sanba•450

  @sanba-anassPosted about 2 years ago

  hi, I edited the solution thank you for the beautiful feedback I learned a lot from you guys! 😁😁

  1

  ---

  

  Adriano•38,160

  @AdrianoEscarabotePosted about 2 years ago

  @anasssanba1 no problem, keep coding! 😁

  Marked as helpful

  1
• 

  anass sanba•450

  @sanba-anassPosted about 2 years ago

  @AdrianoEscarabote hi, Adriano thanks for the solution I understand everything wasn't aware of that I will do my best next time thanks a lot!

  1
• 

  anass sanba•450

  @sanba-anassPosted about 2 years ago

  thank you, Lucas, for this so helpful information I will improve my self more in the future thanks again for being active in the community!

  1