Long lists need to be displayed differently on different devices generally. CSS3 can ease your pain by dividing these up for you via the column-gap property.
Apply your css like so:
Create a simple:
To extend this, you can then utilize media queries to have a different number of columns on different devices / screen sizes. This will keep your lists together, if they are long, rather than needing to divide them up in order to make them “look” even in the page.
Check out a demo or view it below…
I love the angularmaterial library. It has a lot of great design and functionality built right in, but I am not working on an angular project and need the rad tabs!
Working with the horizontal scrolling tab idea from the angular material library, I came up with a simple version you can check out on CodePen or right here:
Feel free to clone or fork the library to help make it great!
Nesting in SASS is wonderful, but also can become a NIGHTMARE! “Simple pictures are best” as one of my kids books always reminds the subjects. As a super simple idea.. Make sure your top level selectors are set before you zero in on specifics.
is an easy way to make sure all those links are white, however, making the “a” selector color at the parent level white would be better and simple to maintain.
Layout your project with the most generic selectors solidified at a parent level and then only overwrite what is necessary, when it is necessary.