Skip to content
Submitted about 5 years ago

Base apparel with Grid positioning for desktop

Sol B W•80
@solybarr
A solution to the Base Apparel coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Nitya Gulati•665
    @nityagulati

    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!

  • Eliazar Lopez•25
    @eliazarnd

    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.

  • Sol B W•80
    @solybarr

    Thank you @nityagulati !

  • Sol B W•80
    @solybarr

    Thank you @eliazarnd!

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