Splash pages are built to be optimized for different screen sizes — meaning your event should look good on phones, tablets, and even the various widths of your desktop browser.
That said, you may want to adjust the way your page translates to, say, an iPhone or iPad: that could mean altering font sizes, the spacing between blocks, the layout of certain elements, etc.
Splash's responsive tools allow you to view what your site looks like on phone and tablet, and then fine-tune its styles without affecting what you designed on desktop. This is built right into the Event Page Editor.
Go to the Editor by selecting the Event Page tile.
In the grey bar at the top you can find symbols for Desktop, Tablet, and Phone modes. Click any of them to view the page as it will appear on these devices.
Make edits to your page as you normally would and when you're done, click Save.
Here’s a big note: You ready? Edits you make to your page on Desktop will pull through on Mobile and Tablet but once you start making stylistic changes in the Mobile or tablet workspace, you are basically unlocking the workspaces you’re editing from the others. With that in mind, let’s breakdown what you CAN and CAN NOT get away with when styling for mobile:
What a designer CAN change on mobile/tablet:
- Size Of Text
- Alignment of Text
- Line height
- Letter spacing
- Title casing
- Width & Height of elements & blocks
- Margin & padding
- Positioning (Float)
- Background Imagery
- Hiding/Showing individual components
What a designer CAN'T change on mobile/tablet:
- Text content within an element
- Order of elements and blocks
Watch the video below for a more thorough breakdown of all these options!