Kaleidoscope Product Landing Page

Code Feedback
1

Hey, Looking for some feedback on my product page. Thanks!!

https://codepen.io/taraklee/full/pojQzpo

I couldn’t figure one thing with my nav bar. When the browser is less than 800px wide, I changed the links to column style. I want there to be some padding between them so it’s easier to click the link you want, but even though the padding seems to be there when I inspect using dev tools, it just overlaps the link below it. Any ideas?

Thanks again,
Tara

2

Hi Tara Michelle, the reason your padding isnt working is because the link element is an inline element the padding is only added to the right and left you should nest your link elements inside a list.

if you change your link elements display to block at 800px you will see your padding will work

 @media (max-width: 800px){
 .nav-words a {
      font-size: 1em;
      display: block;
    }
1 Like