> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navattic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Responsive strategies

> Learn how to make your demos look great on every screen size.

Navattic provides four different responsive strategies that determine how your Navattic demo appears on viewports of different sizes. Visit your Demo > Build > Responsive to adjust.

<Tabs>
  <Tab title="Scale width">
    This option will fit the width of the capture to the width of the visitor’s screen. This is a good option if you are embedding a demo in a smaller iFrame or expect it to be viewed on a variety of devices.

    <Info>
      **Tip**: Resize your window to **1440 x 900px or smaller** when taking Captures for a consistent
      experience with Scale Width.
    </Info>

    <Expandable title="preview">
      <img src="https://mintcdn.com/navattic-app/KyLVfu_TECs3vwBD/images/supporting-screen-sizes-1.gif?s=99afb51e1a534b45001289392fd00079" alt="Scale Width" width="800" height="449" data-path="images/supporting-screen-sizes-1.gif" />
    </Expandable>
  </Tab>

  <Tab title="Responsive">
    The default setting for new Product Demos, **Responsive** will apply your application's default styles for different viewports. This provides the most realistic look and feel for your demos and is recommended if you plan to share a Product Demo Link directly with end users.

    <Expandable title="preview">
      ![Responsive](https://archbee-image-uploads.s3.amazonaws.com/YYk8JOCMmxT-GPN-0CkK6/2aMJeNj7ApHGRFM6w-2mu_responsive.gif)
    </Expandable>
  </Tab>

  <Tab title="Scale width+height">
    This option will fill the entire screen while maintaining the relative sizes of the original screen.

    <Expandable title="preview">
      <img src="https://mintcdn.com/navattic-app/KyLVfu_TECs3vwBD/images/supporting-screen-sizes-2.gif?s=a6826a26e94aedf3e5eb9e37691892a7" alt="" width="800" height="471" data-path="images/supporting-screen-sizes-2.gif" />
    </Expandable>
  </Tab>

  <Tab title="Fixed">
    A Fixed strategy presents Captures at their original dimensions, regardless of the end user's viewport dimensions. Visitors will scroll if there is overflow.

    <Expandable title="preview">
      ![](https://archbee-image-uploads.s3.amazonaws.com/YYk8JOCMmxT-GPN-0CkK6/9fv7FesJk-yZMSHQld8ET_fixed-responsiveness-strategy.gif "\"Fixed\" behavior will present Captures at their original dimensions")
    </Expandable>
  </Tab>
</Tabs>

<Icon icon="party-popper" /> **Congratulations** -- you've learned how to make your demo
**Responsive** to different screen sizes.

Next, learn how to customize how your demo appears on mobile devices and smaller screens

<CardGroup cols={2}>
  <Card title="Demos on mobile" icon="smartphone" href="/build/mobile" img="/images/mobile-swipe-demo.png">
    Configure how your demos appear on mobile devices and smaller screens.
  </Card>
</CardGroup>
