Universe sites look better than ever on mobile and desktop.
With our new flexible Grid, sites seamlessly adjust to every device for a consistent professional + polished appearance.
How does it work? Will my site immediately look different?
How does it work? Will my site immediately look different?
You are in control of how your site looks across devices. By default, nothing about your existing Universe site is changing. But by adjusting a few settings—notably the Content Resizing option— you can decide how your content resizes. Your site will flex to fill in space on desktop, and scale down properly to ensure it looks good on mobile devices, too.
How do flexible rows work?
Now that Universe sites are responsive, you aren’t limited by the height of rows— you can adjust row height in a number of ways. Certain blocks behave differently, here’s a quick breakdown:
Text Blocks: Row height automatically adjusts to fit all of the content in a Text Block. Simply add more text, and the row will grow. Remove text, and the row will shrink.
Image Blocks: When adding an image to your site, by default it will adjust row size to fit the image aspect ratio. To adjust the row size, simply drag the handle on the bottom border of the image as demonstrated in the example below.
Button Blocks: When a row contains button blocks, the text size, padding and margin dictate block size. See the example below.
Other blocks utilize Block Size to adjust row height. To learn more about Block Size, read the section on block size below.
What is Content Resizing?
Content resizing determines how the content of your entire site (all pages) adjusts as browser size changes. You have three primary options:
Centered (default): Your site content remains in the center of a browser window up to a maximum width.
Full Width: Your site content expands to fill the entire width of the browser window.
Aligned: Your site content is aligned to the left or right side of the browser window up to a maximum width.
See content resizing options on iOS and web.univer.se below.
What are Gutters?
Gutters are flexible columns of space on left and right of your content always touching the edge of the browser window. Once you’ve selected content resizing behavior, you can control the gutters: the minimum amount of extra space to the left and right of your content. You can change your gutters based on how much you want your content to flex. You have a few preset gutter options to select: none, medium, and large. If you want to customize gutter size, select custom.
Just like the other columns of the Grid, you can also add content to gutters. Any content that spans across both gutters will always stretch to fill the entire width of the browser.
What is Content Width?
Content Width allows you to set how wide your content will span across the browser when viewing your site. For example, when content resizing is set to Centered, you can control the maximum content width. You have a few preset options to choose from: small, medium, and large. If you want to customize the maximum content width, select custom, and enter the specific pixel width you wish your content to span. See the example of selecting content width presets on web.univer.se below.
Note: when editing your site on smaller devices (like iPhones), you may not see a difference when switching between maximum content width presets. This is because the screen on your device is well under the maximum content width.
What is Block Size?
Photo, Shape, Video, Loop, Gallery and Map Blocks enable you to control Block Size. Select the block and tap edit to adjust the Block Size setting. Choose from a preset aspect ratio, original aspect ratio, custom aspect ratio, or fixed height. From there, tap and drag the handle on the bottom edge of the block to adjust the Block Size. Rows will automatically adjust in height to fit the size you select.
To learn even more about building a responsive site on Universe, check out all of the articles here!