Change padding in photo view

[fifteen15studios]

Modern Tribe,

This may be considered a modification question, but I couldn’t find a straight answer and I’m sure others would have this question too.

How do we change the padding between the tiles in photo view? It looks like the tiles adjust their size using JavaScript or something, but the distance between them remains the same. I’d like to narrow it so that they’re closer together. How do we go about changing this value?

To clarify, the space in question is between all the tiles which display events in photo view.

Thanks!
Brendan

[Cliff]

Hi Brendan.

The Photo view columns are generated via width percentages: http://cl.ly/353F1r381Z0E and positioning from the left: http://cl.ly/1y1t2E2R2n3T

The column sizes and alignment is generated via the Isotope script (which is customized by the Pro add-on via /wp-content/plugins/events-calendar-pro/src/resources/js/tribe-events-photo-view.min.js — there’s also an adjacent non-minified version for reference)

As such, I don’t believe there’s a best-practices way to customize the width of each column nor the columns’ gutter/spacing.

[Cliff]

FYI: here’s some code we came up with to make it 4 columns instead of 3, if that’s more appealing to you:

body.post-type-archive-tribe_events #tribe-events-photo-events .type-tribe_events.tribe-events-photo-event {
width: 20%;
}

body.post-type-archive-tribe_events #tribe-events-photo-events {
margin: 18px -4% 18px 0;
}

For your site, it’d make it look like this: http://cl.ly/3B1l102q040w

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts