Is it possible to have a summary block showing different numbers of posts in computer, tablet and mobile view?

Site URL: https://ayane.uk/

Hi, I recently reworked my website and I've added featured posts to my homepage (before I just had a very simple homepage).

In 'computer view' it now has a row of 6 posts in two difference places on the homepage, which I'm really happy with the way it looks. But this really doesn't work on the 'mobile view'.

I was wondering whether it was possible it to display only one post initially in 'mobile view', but with an arrow next to it (like the carousels or slideshows have) so you can slide through the rest of the posts. I've tried all the different summary options I have in my template and the best I can get without messing with the 'computer view' is either them all stacked vertically (which makes for a lot of scrolling!) or two tiny very scrunched up posts side by side with an arrow to navigate through the rest.

Ideally I'd like the 'tablet view' to have 3 posts showing and then you can scroll through the rest. 

In short; 'computer view' = 6 posts, 'tablet view'= 3 posts (with arrow to scroll through the remaining 3) and 'mobile view'= 1 post (with arrow to scroll through the remaining 5)

I can do basic css and html, but this is a bit beyond my knowledge! I've tried googling various wordings of my question to see if there are any code clues, but I can't find what I'm looking for.

Any help would be really appreciated.

Thanks,

Sam

On 7/28/2021 at 11:08 PM, Samantha_Rose said:

Site URL: https://ayane.uk/

Hi, I recently reworked my website and I've added featured posts to my homepage (before I just had a very simple homepage).

In 'computer view' it now has a row of 6 posts in two difference places on the homepage, which I'm really happy with the way it looks. But this really doesn't work on the 'mobile view'.

I was wondering whether it was possible it to display only one post initially in 'mobile view', but with an arrow next to it (like the carousels or slideshows have) so you can slide through the rest of the posts. I've tried all the different summary options I have in my template and the best I can get without messing with the 'computer view' is either them all stacked vertically (which makes for a lot of scrolling!) or two tiny very scrunched up posts side by side with an arrow to navigate through the rest.

Ideally I'd like the 'tablet view' to have 3 posts showing and then you can scroll through the rest. 

In short; 'computer view' = 6 posts, 'tablet view'= 3 posts (with arrow to scroll through the remaining 3) and 'mobile view'= 1 post (with arrow to scroll through the remaining 5)

I can do basic css and html, but this is a bit beyond my knowledge! I've tried googling various wordings of my question to see if there are any code clues, but I can't find what I'm looking for.

Any help would be really appreciated.

Thanks,

Sam

Hi. You will need CSS + JavaScript to solve this (CSS to make 3 posts/row on tablet + 1 post/row on mobile + JavaScript to handle arrow behavior click).

The simplest way is add 3 Summarys with different posts, then use CSS to show 6 posts summary on desktop, 3 posts on tablet, 1 post on mobile

Awesome, thank you @tuanphan! I'll give it a go.