# Page Sizes and Image Dimensions

### Page Sizes <a href="#pagesizesandimagedimensions-pagesizes" id="pagesizesandimagedimensions-pagesizes"></a>

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.

<figure><img src="/files/La3dAu355mz2Gi2xJQiL" alt=""><figcaption></figcaption></figure>

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.

### &#x20;Image Dimensions <a href="#pagesizesandimagedimensions-imagedimensions" id="pagesizesandimagedimensions-imagedimensions"></a>

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/page-sizes-and-image-dimensions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.