Design Issues Follow
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.
1.1 Image dimensions
1.2 Image sizing
2.2 Uneven spacing
3.1 Content cut off
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.
Note: Most of these troubleshooting tips apply to users with advanced design permissions, available with certain roles on a paid Splash plan.
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.
Pro Tip: Hover over blocks and elements on page to see where margin and padding has been applied. Margin will appear as yellow space and padding as green.
Keep these definitions in mind as we walk through how to change the size of images in Splash.
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.
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.
The size of a background image is determined by two things:
- The content inside of the block, element, or container that the background image is applied to.
- 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.
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.
Pro Tip: Use percentages (%) for margin and padding to keep your content looking great across any screen size.
If you're on a free or Splash Basic plan, these controls are not available. Instead, we recommend either:
- Selecting a new block from the block adder or
- 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:
- Locate the block that contains the repeatable inside the Layout tab.
- Click into the Repeatable Container.
- From the Repeatable Container dropdown, select your height matching choice.
Pro Tip: Use "Disabled" when you want to stack repeatable elements that are 100% width. Examples of this include agenda or schedule items.
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.
Pro Tip: Vertical oriented images are usually better suited for mobile. You can change the background image on Mobile or Tablet view to be different than your background image on desktop.
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.
Please sign in to leave a comment.