Splash event pages are built using a powerful set of design tools rooted in CSS. This article breaks down the most common design issues and gives you steps to troubleshoot on your own.

Images

Image dimensions

There a few tried and true rules when it comes to uploading images in Splash:

• Keep images under 2,000 pixels wide.
• Keep file sizes under 10MB.
• Keep the dots per inch (DPI) under 72.
• Use jpgs, pngs, or gifs.

Chances are you're going to want to adjust the image within the confines of your event page, so let's keep going.

Image sizing

If you're experienced in web design, you might already be familiar with the terms margin and padding. Margin refers to the space outside blocks or elements while padding refers to the space inside blocks and elements. 

Keep these definitions in mind as we walk through how to change the size of images in Splash.

Image elements

If you see the Image Options tab, you're working with an image element--our most basic form of imagery.

To make the image element bigger or smaller, use the Width, Height dropdown to adjust the width.

Square elements

Think of a square element as a frame. When uploading an image to that frame, you decide how you want the image positioned.. 

To resize a square element, use the Width,Height dropdown to increase or decrease the width. To change the height of the square, adjust the bottom padding (space inside the element) inside the Margin/Padding tab.

Background images

The size of a background image is determined by two things:

1. The content inside of the block, element, or container that the background image is applied to.
2. The amount of padding of the block, element, or container that the background image is applied to.

You can use the Background tab to make further adjustments to the size.

Spacing

Almost all spacing issues can be resolved by tweaking margin, padding, or height matching settings, each outlined below.

Removing white (or extra) space

Spacing is all about finding the right balance of margin and padding. 

Try hovering over the extra space on your page and clicking. This takes you to the exact block or element in the Layout tab where you can add or reduce the margin or padding that's applied.

Not seeing any margin or padding? Use the layout tree to click on the containers inside the block or the title of the block itself. Chances are you will stumble upon some additional margin or padding.

If you're on a free or Splash Basic plan, these controls are not available. Instead, we recommend either:

1. Selecting a new block from the block adder or
2. Changing the background color of the block.

Uneven spacing between elements

When working with a group of identically styled items, known in Splash as a repeatable, there are cases where the spacing may get out of whack.

A common example is a group of speakers--some speakers may have longer titles or bios than others, causing your repeatable design to look...well not so repeatable.

The solution? A concept called height matching. With height matching, you decide how you want your repeatables to match one another in size, or height. Your choices include:

• Disabled: No height matching is applied. Instead, each repeatable is as tall as the elements inside of it are.
• Cards the same height: Each repeatable card is the same height, regardless of how tall the elements inside are.
• Elements same height: We look at the height of the card with the tallest element, and match the rest of the cards to that height. In the example above, Sally Abrams has the longest (therefore tallest) title, so the rest of the speakers' titles scaled proportionally. 

To locate height matching:

1. Locate the block that contains the repeatable inside the Layout tab.
2. Click into the Repeatable Container.
3. From the Repeatable Container dropdown, select your height matching choice.

Mobile and Tablet Design

Our pre-built themes, blocks, and elements are designed to look consistent across mobile and tablet devices. But once you start making changes using our advanced design tools, you'll want to check out the mobile and tablet views to make sure things are looking right.

Content cut off

In most cases, you risk cutting off content on smaller screen sizes when you set min or max heights and widths on blocks, elements, or containers.

We suggest removing all of these values, and relying on our built in Width, Height tools, in combination with Margin, Padding to achieve your sizing needs.

Changes not reflecting

If you're not seeing your changes on desktop reflecting on mobile or tablet (or vice versa), make sure that you're not working within a device-specific block.

Sometimes blocks are hidden on desktop, mobile, or tablet view and a new device-specific block is created. Be sure to always properly label your blocks like "Desktop - Cover" and "Mobile - Cover" to prevent confusion when collaborating on a page.