Here’s what I am trying to achieve: a row of icons on a horizontal row.
My approach is using a block and:
1. Creating a container
2. Then, create a grid with x6 columns
3. Then, add the icon in each column
This approach ^ works great in desktop + tablet, but on mobile, it looks a bit thin with a lot of white space on each side.
Ideally, I’d love to see a 2 column grid on mobile.
Can this be done or would I need some CSS to hide/show the containers?
I thought I could create TWO identical containers and hide one or the other depending on the media query with different arrangements…using something like this:
#content-desktop {
display: block
}
#content-mobile {
display: none
}
@media screen and (max-width:768px) {
#content-desktop {
display: none
}
#content-mobile {
display: block
}
}
This alas didn’t work…
Any suggestions, workaround?