# How the plugin scales elements to the PDF page

### Video Tutorial

The below video tutorial demonstrates how the PDF Creator plugin scales elements from the Bubble canvas onto the PDF (relevant section is from 07:35):

{% embed url="<https://www.youtube.com/watch?t=455s&v=gaFNz7UHDkI>" %}

### Details

The PDF Creator plugin takes the CSS style associated with the target element and uses this to decide on the width/height of the element on the PDF.

For example, the width of the group highlighted below is 0px (min) to inf (max):

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

This means the PDF Creator will take the 'inf' value and attempt to take up as much space on the PDF as possible. If we set all margins to 0, the target element will take up the full width of the PDF (I've adjusted the background color of the target element to make this obvious):

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

If we add a right and left margin of 20px (in the Generate PDF Creator action), we'll be able to see this in the output PDF.

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

### Size of the PDF page

The size of the PDF page will depend on which format you choose. You can view the sizes of the various formats (in px) by clicking on the 'show documentation' button underneath the 'Format' field:

<div align="left"><figure><img src="/files/6zCmEHFVRZa6J8JMnSR4" alt="" width="321"><figcaption></figcaption></figure></div>

For example, a4 pages are 794px wide. Therefore, if we set the max width of our target element to 700px (with no margins), it will take up MOST of the width of the PDF:

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

If you set the minimum width of the target element to be greater than the width of the PDF page, your target element will 'spill out' over the edge of the page.

In this example, we're setting the min width of our target element to 900px:

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

Which results in not all of the target element being visible in the PDF:

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


---

# 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://cranford-tech.gitbook.io/pdf-creator/tips/how-the-plugin-scales-elements-to-the-pdf-page.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.