I just finished making the product landing page. At first, I wasn’t sure which real-world company I wanted to do a page for, but then I searched around this forum and found someone who had done a page based on a video game, and I got inspired. This one is for The Leftorium, Ned Flanders’s specialty store for left-handed people.
This was definitely a step-up in difficulty for me. I did my best to make it responsive for mobile, which was challenge. I’d appreciate any feedback y’all have on mobile responsiveness or the page in general (though fair warning that my page is longer and much more involved than the example).
Thanks! I’m glad you enjoyed the colors and theme.
Re: the new products section, I did have a hard time centering it with a grid. When I did it with flexbox, it was easier, but then the objects started to look weird when they needed to go on two rows. I hope I’ll be able to fix that at some point.
I’m not sure how to do the toggle thing, but it sounds like a good idea. (I’m not sure if they would have allowed it for this project, since the navigation menu was always supposed to be at the top of the viewport). It would be especially nice for mobile, where the navigation menu takes up a lot of vertical space (and I don’t want to make the text too small for people to read).
I always find it useful to use borders to help me debug things as then I can see where the elements are. So apply something like border: solid and border: dashed on different elements to get a quick glance of their whereabouts and positions.
From looking at your CSS I can see that you’re missing margin: 0 auto in the .products class. This will center each product in the grid. I made a simple Codepen that demonstrates this.
Have a look at it and play around with the margin in the .grid-item class.
Thank you! That helps a lot! I just used your margin: 0 auto tip to make my grid of projects centered on my portfolio. When I get a chance to look over the landing page again, I’ll go ahead and see if the margin fix makes my grid centered.
