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 with Grid positioning for desktop

Sol B W 80

@solybarr

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


Hello, I used grid for the positioning of the desktop design. The only thing I couldn't do was get the image larger like I saw some other coders did.

I had an accesibility error so I had to add a "label" element to my form even though it was empty. Its really good to run your html through HTML Codesniffer to get it validated.

Any tips would be welcome. This is my first solution here and my first time using CSS Grid.

Community feedback

P

@nityagulati

Posted

Looks good, Sol! Your code is clean and well structured. Great work coding mobile-first and using Grid.

  • You don't need to add the space character inside the hero div. You can just have an empty div in the html and it will still take the background image and height/width settings from your css.

  • Currently, if the email field is empty, it displays the error for a few seconds and then submits the form. You will need to prevent the form from submitting when the email does not validate in your js code.

  • Mobile breakpoints 375px and below show a horizontal scrollbar, you probably need to adjust the margins slightly. You can test it out using Chrome Developer tools.

Keep up the good work!

1

@eliazarnd

Posted

Hello, i like how you used grid for creating a layaout

I saw your structure and code of css, i found out your issue, your image can not get full size, because you need to give a height to your container because thats the main feature of landing page.

Your image needs a property like background-size: cover, with this property you cover all the container of your image.

Thats it,

Gretting and continue relearning all wonderful things of this world.

1
Sol B W 80

@solybarr

Posted

Thank you @nityagulati !

0
Sol B W 80

@solybarr

Posted

Thank you @eliazarnd!

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