On the bottom of this page I am using content modals to create a staff gallery where clicking on the image or name opens a model box with staff bio. So far I’ve created 1 row with 4 columns, 1 staff member per column. I intend to add several more rows.
I’ve got it working well except that on screens below 768px I want the 1 row of 4 to stack as 2 rows of 2 rather than the default behavior 4 rows of 1. To achieve this I added this custom css:
@media (max-width: 767px) {
.staffrow {
-webkit-column-count: 2;
}
}
This also works fine except that, once stacked, the toggle text (staff name and title) is being overlapped by the row below it. This text is coming from the toggle settings. See my screencap in which I’ve outlined in red the text I am referring to.
Why isnt the toggle x-anchor-text included in the its parent column? It is not absolutely positioned and is not a psuedo element. What is the best way to correct for this?
I can probably find a way to prevent this but I am wondering why I need to as this seems like odd behaviour.
Would I be better off beginning with a 2-column row and using media queries to change the layout on screens larger than 767px?
Thanks
Using Pro 1.2.7
