--- title: "How to set the default height and width of the embedded PDF" slug: "how-to-set-the-default-height-and-width-of-the-embedded-pdf" description: "Preview size of the PDF files in the article would vary for browsers. However, you can configure the desired height and width of the PDF file." tags: ["Customization"] updated: 2026-07-10T12:25:04Z published: 2026-07-10T12:25:04Z canonical: "docs.document360.com/how-to-set-the-default-height-and-width-of-the-embedded-pdf" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # How to set the default height and width of the embedded PDF By default, the height and width of an embedded PDF preview in an article varies depending on the reader's browser. You can set a consistent fixed size for all PDF previews using Custom CSS, so the preview renders at the same dimensions for all readers. :::(Info) ( NOTE) This workaround applies only to articles created in the **Advanced WYSIWYG editor**. PDF previews in Markdown editor articles are not affected. ::: --- ## When to use this fix - **Inconsistent PDF preview sizes across browsers**: browsers render embedded PDF objects at different default dimensions. This fix enforces a consistent size. - **Controlling preview prominence**: set a larger height to give the PDF more vertical space on the page, or a smaller size to keep it compact alongside surrounding content. :::(Warning) (

WARNING) The CSS selector `object` targets **all** `` elements on the site, not just PDF embeds. If your knowledge base uses `` tags for other content types (such as SVGs or other embedded media), those will also be resized by this snippet. ::: --- ## Quick reference Replace `500px` with your desired height and width values. ```css object { height: 500px !important; width: 500px !important; } ``` --- ## How to set PDF preview height and width 1. In the Knowledge Base portal, go to **Settings** > **Knowledge base site** > **Custom CSS & JavaScript**. Knowledge base site settings page showing the Custom CSS and JavaScript option in the left navigation. 2. Select the **CSS** tab and paste the following snippet: ```css object { height: 500px !important; width: 500px !important; } ``` 3. Replace both `500px` values with your desired height and width. 4. Click **Save**. Custom CSS editor showing the PDF object height and width snippet pasted in the CSS tab with the Save button visible. --- ## Outcome After saving the CSS, embedded PDF previews render at the specified fixed dimensions across all browsers. Knowledge Base site article showing an embedded PDF preview rendered at a fixed height and width set by Custom CSS. --- ## Scope and coverage | Item | Detail | |---|---| | Scope | Global, all `` elements across all WYSIWYG editor articles | | Editor support | Advanced WYSIWYG editor only. Markdown editor articles are not affected | | Default example size | `500px` × `500px`, adjust to your layout needs | | Height and width | Set independently, you can use different values for each | | Percentage values | Supported, use `width: 100%` to fill the article container width | --- ## Best practices - **Set width to a percentage rather than a fixed pixel value where possible**: `width: 100%` fills the article container and adapts to different screen sizes, while a fixed `500px` may overflow on narrow screens or appear too small on wide ones. Use fixed values only when you need a precise, unchanging size. - **Set height relative to your PDF content**: a height that is too small forces readers to scroll within the preview panel. Consider `600px` or `700px` for a standard A4-portrait PDF to show at least one full page without scrolling. - **Test on mobile after applying**: fixed pixel dimensions do not scale down on small screens. If your knowledge base has significant mobile traffic, check that the PDF preview does not overflow the article layout on narrow viewports. - **Use a more specific selector if needed**: if the broad `object` selector affects other embedded content on your site, replace it with a more targeted selector. For example, `article p object` limits the scope to `` elements inside article paragraphs.