Why does my text not stay on one line across all screen sizes?

All Splash pages are built responsively. This means the size and placement of the blocks and elements that make up your page layout will adjust in response to the size of the device you're using to view the page.

All web pages (not just Splash pages) also need a minimum of 3 breakpoints for each device – desktop, tablet, and mobile. Breakpoints are the point at which your event page content responds to provide the best possible layout depending on the size of the browser window or screen size.

While there's no universal range for breakpoints, here are a few ranges to keep in mind – desktop = anything greater than or equal to 815px, tablet = 814px - 682px, and mobile = anything less than or equal to 681px.

Keeping all of this in mind, being able to perfectly control the way in which certain aspects of the page respond based on the size of your browser window or screen size is nearly impossible – especially when it comes to line breaks within text.

The good news is we have a few tricks up our virtual sleeves that we've found to be helpful should you need to modify line breaks.

1. Try increasing or decreasing any Margin or Padding that's applied on the block, container holding the text, or on the text itself.

2. Expand or reduce the Width on any blocks, containers, or elements. 

3. Adjust the Font Size across your devices to be larger or smaller where needed.

4. Use the "return/enter" key on your keyboard to break text content into separate lines of text when needed instead of using the "space" bar on your keyboard in attempt to achieve the same thing. Keep in mind that formatting your text content (adjusting spaces, adding line breaks, adding/deleting text, etc.) is only possible in Desktop view.

5. If you have a smaller amount of text, you may try breaking the text out into multiple text elements rather than having it all contained in one element. This may not be the best solution depending on the amount of text as well as the layout of the page.

6. Take a high-resolution screenshot of the text displayed in the correct format and upload this screenshot into a Square element. It's important to note that this option removes the responsive aspect from the text so that the format is static and remains the same no matter the size. Keep in mind you may need to adjust the image for tablet and mobile devices to ensure the text is legible across all screen sizes.

Want to learn more about responsiveness? Check out our FAQ: Why is my background image getting cut off?

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

Comments

0 comments

Please sign in to leave a comment.