Instagram image count based on screen size

[Andris]

Hello Bricks Builders,

Maybe I am just tired but I couldn’t find an option in the Instagram feed element to control the displayed image count in different screen sizes. What I want to achieve:

Mobile: 9 images in 3 rows

Tablet: 12 images in 3 rows

Desktop: 18 images in 2 rows

Is it possible somehow? Sorry if this is a dumb question.

Thank you!

[Andris]

See the issue here @timmse

Do you have any ideas how to cleverly solve this issue? Maybe hide some of the images via css?

Mobile view:

Desktop view:

[timmse]

You can change the number of columns per breakpoint, but can’t change the number of posts per breakpoint, as it’s one request. Just set it to 18, and hide the unnecessary ones per breakpoint.

/* Add to tablet breakpoint */
%root% li:nth-child(n+13) {
    display: none;
}

/* Add to mobile breakpoint */
%root% li:nth-child(n+10) {
    display: none;
}

[Andris]

I set it to 12 so it works on all three breakpoints.

(Hiding some elements would be a strange solution as it will also use bandwidth and load time, am I right?)

[timmse]

Bandwidth shouldn’t be an issue these days, and I’d say you wouldn’t even notice if it takes slightly longer. But of course: the more to load, the longer it takes.

[Andris]

Yes I agree but it is not elegant solution

But there is no solution to pre render the content based on screen size. Or maybe there is but I agree it doesn’t worth it.