Page Sizes and Image Dimensions
- Tyler Martorano
- Jeremy Simpson
- Drew Weldon (Unlicensed)
Page Sizes
The actual media queries in the CSS are set to these widths:
Desktop: Anything above 992px
Large Tablet: max-width = 992px
Tablet: max-width = 768px
Large Mobile: max-width = 600px
Small Mobile: max-width = 480px
The actual viewport being displayed in the builder is toward the lower end of each media query so you can hopefully get a feel for what your page will look like toward the lowest end of each media query. For example, when editing on the Large Mobile device, the media query will apply for all devices up to 600px, but your viewport in the builder is 490px - just above the Small Mobile device viewport. So in theory, there should be no blind spots. If it looks good at 490px, it will also fit well at 600px - this way you won’t miss elements spilling off your page on smaller devices between media queries.
In the table above, Viewport is the size you see while inside the builder, while the Media Width is the max width of a device that your settings will be applied to.
Image Dimensions
When designing to resize across display types, try to avoid adding hard px dimensions if possible. That way elements will resize appropriately across screens, even if it's a screen size you might not have previously considered. When you drop an image on the page it defaults to 150x150 but from there you can set it to 100% width and auto height.