fylo-landing-page-with-two-column-layout-master using grid
Design comparison
Solution retrospective
I need feedback pls on the responsive part of the site. thank you š; edited : fixed issues on large screen learned a lot from you guys thank you so much yay! š any feedback is welcome >>
Community feedback
- @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
andmargin: 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 helpful1 - @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 usedisplay: flex
withflex-direction: column: reverse
for the mobile version. Its more simple than using grid-area just the good and old1fr 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 aVSCode
plugin calledminify 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-remKeep it up and post more good challenges =)
Marked as helpful1 - @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@AdrianoEscarabotePosted about 2 years ago@anasssanba1 no problem, keep coding! š
Marked as helpful1 - @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 - @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
Please log in to post a comment
Log in with GitHubJoin 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