Different layouts to display summary blocks on desktop and mobile views

Hi guys,

I'm trying to get the mobile view of a summary block to appear differently to the desktop view, for a blog site I'm working on.

In short, I want to display the summary block as a standard 'List' view on desktop, and as a standard 'Grid' view on mobile.

If I go with 'List', it's perfect for desktop, but on mobile, the thumbnail is very small. If I go with 'Grid', it's perfect on mobile, but the image is very large on desktop.

Is there some element of CSS you know of that will force the view depending on the device? - mobile is grid, desktop is list on attachments

Thanks in advance!

Hi! Were you able to solve this? I would like to use carousel view - but display 3 items per row in desktop view & 1 item per row in mobile.

You should share site url, we can check easier.

You can also add 2 summary for desktop - mobile, then we will give the code to hide 1 on desktop, hide 1 on mobile