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

Base Apparel - HTML, CSS, and JS

P
Dave 5,245

@dwhenson

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback most welcome. Any suggestions on the following would be appreciated:

  1. What is the best way to get the image to span the entire height of the viewport? I currently have it positioned outside of the main tag, which is not ideal.

  2. I am not happy with the alignment of the items inside my form input. I tried flexbox and other approaches but nothing seemed to work. Any best practices here?

EDIT: not sure what's happening with that button? It looks fine to me on Chrome here and on Vercal. Any ideas anyone?

Community feedback

Roman Filenko 3,335

@rfilenko

Posted

Hey Dave, nice work, just a few minor touches left:). To fix your issues:

  • for image to be fullpage set {height: 100%; object-fit: cover;), that should do the trick. Also check if all grid properties are applied;
  • form: make it as flex container, and just position button to the right {right: 0, disable funky left value};
  • add some transition for btn on hover effect.

Overall, would advice to use Firefox, devtools are very usefull, specially when debugging flex or gird problems, give it a try😉 Cheers, Roman

2

P
Dave 5,245

@dwhenson

Posted

@rfilenko awesome. Thanks that's just the kind of guidance I needed. I'll have a go with your suggestions once the day job is over. Yes that funky left value kind of told me I was doing something wrong! Cheers.

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, Dave! 👋

Nice work on this challenge! 👍

In addition to the great feedback you've already received, I'd like to suggest,

  • Allowing the body to grow to fit all of the content inside of it even in the desktop layout (i.e., getting rid of height: 100vh or something). Currently, some of the content overflows the body and creates some white space along the bottom of the page in the desktop layout.

Keep coding (and happy coding, too)! 😁

1

P
Dave 5,245

@dwhenson

Posted

@ApplePieGiraffe Thanks I appreciated the feedback, I'm still not getting the image properly but I think it's time to creep some other people's solutions now! I may come back to this one after a short break.

0
P
Grace 27,790

@grace-snow

Posted

Looks nearly there on mobile. Except font is a bit big (goes off the side of the screen for me)

1

P
Dave 5,245

@dwhenson

Posted

@grace-snow thanks Grace. I'll have a play with the values you suggested on Slack.

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