Hello, the website i run has more than 10 authors. And, with the team member element i am only able to add 4 members per row. That makes three rows anecessity, which looks fine on the web version. But, the mobile version has just one member filling up the screen space and making it a endless scrolling adventure. So, i was wondering if there is any way i can add 8 members per row, or a css code that optimises the mobile view. Thanks.
Hi,
You could use inner rows to multiply the columns, maybe you could create a different layout in this case
– https://www.screencast.com/t/B8LzYYuJbd
On mobile the columns will be displayed one after the other. Also a possible solution would be to hide the row or elements on mobile
– https://www.screencast.com/t/9jbTF9cfaniq
– https://www.screencast.com/t/UZbsPqVtzS
Or you could leave it like it is and I could give you a code to display the team members like this. First add a custom class to the row containing the team members
– https://www.screencast.com/t/Uy3tksy6Nb7
Then based on that class a code like this will display the members like this
– https://www.screencast.com/t/rBvRg2pCr
That could be a solution. If you decide to use it here is the code used in the example
.myclass.td-pb-row [class*="td-pb-span"] {
width: 49%!important;
float:left;
padding-left: 5px;
}
This code must be entered in Theme panel->Advanced CSS phones section.
Thanks
