Hi @bluepersia, great job in completing this challenge! Just a few little details - the buttons are missing their box-shadows and it'd be nicer to add hover styles to both the buttons and links in the footer. The second and third main blocks are also not displaying their desktop version of the wave dividers. Hope this helps!
Hi Cara, great job with this challenge and figuring out flexbox! Itβs responsive and pretty much adheres to the design. My only suggestion would be to place the desktop background on body, like you did with the mobile version. Then it's just a matter of positioning it at the bottom. It will give you the option to delete .footer , one less element to maintain. Hope this helps :-)
Hi Harshit, did you mean positioning the message? Removing padding-left for mobile seems to do the trick. In addition, changing text-align: left to center will make .textError responsive. You have a bit of horizontal scroll on mobile, you might want to adjust the fixed widths on input and submit button into a percentage or something more fluid. Hope this helps!
Hi @linzhangcs, great desktop implementation here. For your question regarding the background, I think it's better to put it inside body or main-container and look into background-position property. Here is another page with examples. This gives you the option to delete the background div altogether. Would've liked to see a mobile version of the project :-) Hope this helps!
Hi Miguel, great job here! Just a few things: the bottom margin of the two cards on desktop view are not level with each other and the card-gb-left is almost overlapping the info text at the 765px breakpoint to about 985px. Perhaps playing with the padding on both boxes will solve above issues, instead of assigning a fixed height. Hope this helps :-)
Latest Comments
RE: bluepersia's "Huddle Landing Page - HTML and CSS" solution
Hi @bluepersia, great job in completing this challenge! Just a few little details - the buttons are missing their
box-shadows and it'd be nicer to addhoverstyles to both the buttons and links in the footer. The second and third main blocks are also not displaying their desktop version of the wave dividers. Hope this helps!RE: Cara Uymatiao's "Flexbox Galore" solution
Hi Cara, great job with this challenge and figuring out flexbox! Itβs responsive and pretty much adheres to the design. My only suggestion would be to place the desktop background on
body, like you did with the mobile version. Then it's just a matter of positioning it at the bottom. It will give you the option to delete.footer, one less element to maintain. Hope this helps :-)RE: Harshit's "HTML, CSS and JavaScript" solution
Hi Harshit, did you mean positioning the message? Removing
padding-leftfor mobile seems to do the trick. In addition, changingtext-align: lefttocenterwill make.textErrorresponsive. You have a bit of horizontal scroll on mobile, you might want to adjust the fixed widths on input and submit button into a percentage or something more fluid. Hope this helps!RE: Lin Zhang's "Lin's Fylo Data Storage Component" solution
Hi @linzhangcs, great desktop implementation here. For your question regarding the background, I think it's better to put it inside
bodyormain-containerand look into background-position property. Here is another page with examples. This gives you the option to delete thebackgrounddiv altogether. Would've liked to see a mobile version of the project :-) Hope this helps!RE: Miguel Orrego's "Fylo data storage component" solution
Hi Miguel, great job here! Just a few things: the bottom margin of the two
cardson desktop view are not level with each other and thecard-gb-leftis almost overlapping the info text at the 765px breakpoint to about 985px. Perhaps playing with the padding on both boxes will solve above issues, instead of assigning a fixed height. Hope this helps :-)