DEV Community

Create an Exclusive Product Landing Page using HTML CSS & JS

Aniket on September 01, 2021

Hello dear developers, In today's blog, we'll see how to make an exclusive Product landing page using HTML CSS & JavaScript for your website. ...

Read full post

𒎏Wii 🏳️‍⚧️ • Sep 3 '21 • Edited

.right_container {
    width: 100%;
    height: 100%;
    /* ... */
}

This right here tells me you haven't completely given your soul to the grid 😆

You don't need to (nor should you 😖) set the width and height on the children; the grid should set a default for how the elements are aligned and stretched within.

This is how I'd do it instead:

.wrapper {
   display: grid;
   place-items: stretch;
   place-items: stretch;
   /* ... */
}

😉

Aniket • Sep 3 '21

That's a great change ! Thanks a lot for enriching my knowledge as well...

Happy Coding 🙏🏻

Me • Sep 2 '21

My only issue with this awesomeness is that there is sooooo much movement. It's distracting. Make sure you add the ability to turn off or minimize movement for prefers-reduced-motion.

Aniket • Sep 2 '21

Yuppp ! Got it sir, will make it more smooth but thanks for watching 🙏🏻

Happy Coding 🤓

Diego • Sep 1 '21

Looks insanely awesome, may I ask does it scale well on mobile view?

Aniket • Sep 2 '21

Not yet sir ! But I will work on it to make it responsive. Thank for watching 🙂

Dillon Headley • Sep 5 '21 • Edited

Nice! One small thing, according to html spec you should only have one < main > element in an HTML document. You could move the main tag higher up and use < article > tags instead where you have main