Hi all,
When you have 3 products/blogs/posts looped on desktop in 3 columns, it’s great, but on smaller screens it may be better visually to have 2 or 4 as it responds down to a 2 column layout. Maybe even just 1 on mobile.
I don’t think this is possible as PHP / WordPress / Cornerstone won’t know when a site is mobile or desktop especially as you drag your browser size around. But it would be cool if it was somehow possible even if there was a setting to hide at the given break points.
You could put a class on the main container, look at the structure and do something like div.myclass > div::nth-child(3) { display: none} (obviously putting this in the relevant media query and adjusting the CSS according to your structure.)
Hmm yeah, was hoping as part of the new responsive settings using the breakpoints there and changing settings per breakpoint - even if it was to use something like your suggested CSS behind the scenes - by using the same feature as when you click on the label:
2 Likes
Hi @RubberDuckers,
Loopers always affect the physical markup (like @urchindesign is saying) so there isn’t really a way to omit those elements based on the screen size.
I don’t see us adding anything like this near term but I’ve got an idea that may help.
You could add a custom class to the item like: index-{{dc:looper:index}} Then you could add custom CSS in a media query and do something like: .index-4 { display: none; } It would be a manual process, but still get the job done.
2 Likes