I’m building a site on the Vantage theme and using the SiteOrigin Features widget on my home page. I want to arrange the features 4-per-row on desktop (there are 8 features) but that doesn’t play well on narrower viewports, until it collapses to 1-per-row for small devices. What I need is an additional breakpoint to give me 2-per-row below, say, 800px.
How can I achieve this? I’m competent in CSS & HTML, and I can get my head around php if I have to. I’ve viewed style.css and looked at the page in Chrome Inspector — the relevant structures are quite elaborate so it’s difficult to know where to target any custom CSS.
Hi Clambert
Thanks for posting your question.
We’d love to lend a hand with a customization of this nature. Unfortunately, due to resource limitations, we’re only able to assist with basic support and troubleshooting here on the forums. Within our premium support scope, we can help out with small customizations like this as the budget allows for it.
One simple idea might be to duplicate the features row twice. You could then use the Attributes class field in each row to add a custom class name. Within your Custom CSS you could potentially display a row per resolution, desktop, tablet and mobile. Thereby allowing for a different layout per resolution. I realize another breakpoint setting would be ideal for this problem but the above is all I can suggest that’s easy to achieve at this stage.
We have a Toggle Visibility addon in SiteOrigin Premium that would make the above easier. If you’re familiar with CSS you could do the same using Custom CSS.
Hi Andrew
Thanks for your advice. If I understand it correctly, I would have two instances of the feature widget, one set at 4-per-row and the other at 2-per-row. Assign a different custom class name to each, then use “display: none” within media queries to selectively display one or the other at different widths. Have I got that right?
Charlie
Hi Charlie
Indeed. That would be a basic way of working around the issue you’ve described.