How do I remove the extra space under my Repeatable cards on mobile?

Things can get a little tricky when trying to make spacing display consistently around Repeatable cards across Desktop, Phone and Tablet views – especially since there can only be one Height Matching setting used across all devices for Repeatables. Check our FAQ: What is Height Matching? for a quick refresher!

Extra spacing appearing below cards on smaller screen sizes is most frequently seen in layouts where Repeatable cards sit side by side in Desktop view, like the example shown below, depending on the chosen Height Matching setting.

Screen_Shot_2019-03-08_at_11.20.45_AM.png

For the Repeatable card height to be exactly the same for all cards, you'll need to activate one of these two settings:

1. Cards Same Height 

2. Elements Same Height

Keep in mind this setting will transfer over to all views as well to ensure the card height is always the same, regardless of the device the event page is being viewed on. This is what creates additional spacing to occasionally appear, shown in this example.

Screen_Recording_2019-03-08_at_11.26_AM.gif

So you may be asking yourself if there's a better card layout to use to instead, and we're here to let you know you've come to the right place!

Using a layout where cards are stacked on top of each other, similar to the example below, helps you dodge this debacle altogether since all Height Matching settings can be Disabled without noticeably affecting the consistency of card heights.

Screen_Shot_2019-02-15_at_2.48.01_PM.png

Here's a quick glance at all device views:

Screen_Recording_2019-02-22_at_11.27_AM.gif

If you're still running into your old friend notoriously know as "white space", feel free to shoot our support team a quick line to see if there's anything they can do to help get rid of the nuisance! 

Was this article helpful?
0 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.