# Container Requirements (Width/Height)
## Container Requirements (Width/Height)
### Why does Calcumate need a container with defined dimensions?
When Calcumate initializes, it attempts to measure and reserve space in the DOM to properly render the calculator interface. The calculator uses this measurement to determine responsive breakpoints, layout proportions, and component sizing.
In standard web page implementations, the `calcumate-root` div naturally inherits a usable width from its parent elements. However, certain environments prevent this inheritance, causing the container to report a width of `0` or an undefined value. When this happens, Calcumate cannot calculate proper dimensions, resulting in layout failures or the calculator not loading at all.
### When do container width issues occur?
Container width problems most commonly appear in these scenarios:
**Iframe Embedding** When using web editors like Wix, GoDaddy, Framer, Squarespace, or similar CMS platforms that embed custom code inside iframes, the `calcumate-root` div may not inherit any natural width from the parent document.
**Site Builders with Isolated Containers** Some site builders place custom HTML blocks inside containers that have no explicit dimensions, use `display: inline`, or are hidden during initial page load.
**CSS Frameworks with Flex/Grid Layouts** Containers using `flex` or `grid` layouts without explicit sizing can result in zero-width children until content forces expansion—which Calcumate cannot trigger during its initialization phase.
**Delayed or Lazy-Loaded Sections** If your calculator is inside a tab, accordion, modal, or lazy-loaded section that starts hidden (`display: none`), the container may report zero dimensions when Calcumate first tries to initialize.
### Symptoms of missing container dimensions
If your container lacks proper dimensions, you may experience:
* Calculator not appearing at all (blank space)
* Calculator appearing extremely small or compressed
* Layout elements overlapping or misaligned
* JavaScript console errors related to dimension calculations
* Calculator loading on desktop but failing on mobile (or vice versa)
### Recommended Solution
Add explicit width styling to your `calcumate-root` div:
```html
```
The `calc(100vw - 40px)` formula provides viewport-relative sizing with a small margin to prevent horizontal scrollbars.
#### Alternative sizing approaches
Depending on your specific setup, you may prefer different width values:
**Fixed width for consistent sizing:**
```html
style="width: 980px; max-width: 100%;"
```
**Percentage-based for flexible layouts:**
```html
style="width: 100%; max-width: 1200px;"
```
**Viewport-relative without margins:**
```html
style="width: 100vw; max-width: 100vw;"
```
### Iframe-Specific Recommendations
When embedding Calcumate inside an iframe, you need to configure both the iframe dimensions and the container within it.
#### Recommended iframe dimensions
| Device | Width | Height |
| ------- | ----- | ------ |
| Desktop | 980px | 800px |
| Mobile | 350px | 850px |
#### Complete iframe implementation example
```html
```
```html
```
### When should you apply these styles?
**Apply explicit width styling when:**
* Embedding through Wix, GoDaddy, Framer, Squarespace, or similar site builders
* Placing the calculator inside an iframe
* Using CSS frameworks that don't provide natural container widths
* The calculator appears inside tabs, modals, accordions, or collapsible sections
* You experience any of the symptoms described above
* You're unsure about your container's natural dimensions
**You may not need explicit styling when:**
* Embedding directly into standard HTML pages with normal document flow
* Your container already has explicit CSS width defined elsewhere
* The calculator is loading correctly without any layout issues
### Troubleshooting steps
If you're experiencing layout issues, follow these steps:
1. **Inspect the container**: Use browser developer tools (F12) to check if `calcumate-root` has a computed width greater than zero.
2. **Add explicit dimensions**: Apply the recommended inline style to your `calcumate-root` div.
3. **Clear cache and refresh**: Perform a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to ensure you're seeing the latest changes.
4. **Check responsive behavior**: Test both desktop and mobile viewports to ensure the calculator displays correctly at all sizes.
5. **Verify parent containers**: Ensure no parent element is constraining or hiding your calculator container.
### Need more help?
If you've followed this guide and are still experiencing issues, please contact our support team with:
* Your website URL where the calculator is embedded
* Screenshots of the issue (desktop and mobile if applicable)
* Browser console errors (if any)
* Your CMS or site builder platform name
We're here to help ensure your Calcumate integration works perfectly.
---
# 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.calcumate.co/frequently-asked-questions/container-requirements-width-height.md?ask=
```
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.