> ## 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.

# Capture Troubleshooting

> Tips and solutions for working with web captures

export const MediaCard = ({title = '', url, type = 'demo'}) => {
  const attributes = type === 'demo' ? {
    'data-navattic-open': url,
    'data-navattic-title': title
  } : {
    'data-video': url
  };
  return <div {...attributes} className="hidden md:inline-block w-auto cursor-pointer overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
<div className="flex items-center gap-3 bg-white dark:bg-gray-800 px-3 py-2">
<div className={`flex h-7 w-7 items-center justify-center rounded-md ${type === 'video' ? 'bg-blue-100 dark:bg-blue-900' : 'bg-orange-100 dark:bg-orange-900'}`} style={{
    backgroundColor: type === 'video' ? 'var(--video-bg)' : 'var(--demo-bg)'
  }}>
<Icon icon={type === 'video' ? 'circle-play' : 'square-mouse-pointer'} color={type === 'video' ? 'var(--video-icon)' : 'var(--demo-icon)'} />
</div>
<div>
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
{type === 'video' ? 'Watch video' : 'Try a demo'}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">{title}</div>
</div>
</div>
<style jsx>{`
  :root {
    --video-bg: #dbeafe;
    --video-icon: #2563eb;
    --demo-bg: #ffedd5;
    --demo-icon: #ea580c;
  }
  :global(.dark) {
    --video-bg: #1e3a8a;
    --video-icon: #60a5fa;
    --demo-bg: #7c2d12;
    --demo-icon: #fb923c;
  }
`}</style>
</div>;
};

Please follow these steps to resolve any issues:

1. Check that the [Navattic Chrome Extension](https://chromewebstore.google.com/detail/navattic/lbecioncobbndebbfdopnpinnibemoon) is updated. You may have to remove and re-add it to force update it.
2. Follow [these instructions](https://support.google.com/chrome/answer/95414?hl=en\&co=GENIE.Platform%3DDesktop) to check that your Chrome browser is updated.
3. After updating the Chrome extension and your browser, please try to re-take the Captures.
4. If the issue persists after updating everything, please toggle on the Advanced Settings of the Chrome extension one at a time and try to take Captures. The Advanced Settings can be found by clicking the Chrome extension > Select Settings > Advanced.
5. If you are still experiencing an issue after testing the Advanced Settings, please email [support@navattic.com](mailto:support@navattic.com), message us in the In-App chat, or report an issue within the Capture Editor.

### FAQs

Below are resolutions to a variety of Capture FAQs. If these instructions do not resolve your problem, please email [support@navattic.com](mailto:support@navattic.com) or message us in the In-App chat and include a link to the broken Capture. Alternatively, you can create an issue report directly from the Capture Editor.

<AccordionGroup>
  <Accordion title="Floating Dropdown">
    If you notice that a dropdown is floating around depending on your screen size, you can either use the **Fit Width** responsive strategy or manually tether the dropdown with the Capture Editor. To tether a dropdown to an element, open up the Capture Editor > Select the entire Dropdown > Select **Magic Editors** > Click **Tether** > Click **Tether to Element** > Select the element the Dropdown should be attached to. From here, you can customize the dropdown's position and click **Save & Exit**.

    <MediaCard url="https://www.loom.com/embed/be802dcdb627493bbd76e05e7715eeaf?sid=8a61b074-cf5e-4e3f-bca4-f87e8365b7a6" type="video" title="Web Capture Technical Guide" />
  </Accordion>

  <Accordion title="Missing Stylesheets or Inconsistent Formatting">
    If you notice that your Capture is missing a stylesheet when you preview it, it is possible that the Capture was taken with an outdated version of the [Navattic Chrome Extension](https://chromewebstore.google.com/detail/navattic/lbecioncobbndebbfdopnpinnibemoon) and/or Chrome browser. Please update your Chrome extension (you may have to remove and re-add it to force update it) and browser before taking the Captures again. If this does not resolve the issue, please email [support@navattic.com](mailto:support@navattic.com) and include a link to the broken Capture or create an issue report from the Capture Editor.
  </Accordion>

  <Accordion title="The page won't load before taking a Capture">
    If you notice that your website won't load with the Navattic Chrome extension, please try toggling on **Disable HTML Patch** in the Advanced Settings of the Navattic Chrome extension. The Advanced Settings can be found by clicking the Chrome extension > Select Settings in the top right > Advanced.If this does not resolve the issue, please email [support@navattic.com](mailto:support@navattic.com) and share a screen recording of the issue. Additionally, if possible, please give our team access to your product's environment or a similar environment where you are taking these captures.
  </Accordion>

  <Accordion title="Popup won't load">
    If your website has a popup window that won't load with the Navattic Chrome extension, please try toggling on **Popup Window** in the Advanced Settings of the Chrome Extension. The Advanced Settings can be found by clicking the Chrome extension > Select Settings in the top right > Advanced.If this does not resolve the issue, please email [support@navattic.com](mailto:support@navattic.com) and share a screen recording. Additionally, if possible, please give our team access to your product's environment or a similar environment where you are taking these captures.
  </Accordion>

  <Accordion title="Unable to select the correct element">
    The element selector uses the same HTML element groups as the original application, so you might not be able to select specific elements. Instead, we recommend using [Beacons](/flows#YRzY6) to bring attention to specific areas of your application.
  </Accordion>

  <Accordion title="Can't edit the text behind the dropdown or popup">
    If you cannot edit elements behind a dropdown menu or popup/modal, it may be because there is an Overlay. You can remove the Overlay using the Capture Editor by selecting the element > Click Magic Editors > Overlay > Remove Overlay.If an Overlay is detected, you will often see a "Remove Overlay" message in the Capture Editor. You may have to remove multiple Overlays to reach the element you'd like to edit.

    <MediaCard url="https://www.loom.com/embed/a23658c24b8f43ddbb6ce2cfc5dc5ec0?sid=9e99d434-bca2-4f1e-80e3-da4aa0e66c44" type="video" title="Web Capture Technical Guide" />
  </Accordion>

  <Accordion title="Captures look different depending on the screen size">
    If your Captures look different on varying screen sizes, we suggest using the **Fit Width** Responsive strategy. Learn more about [Responsive Strategies](/build/responsive).

    <Note>
      If you are embedding your demo, we also recommend using the \*\*Fit Width \*\*Responsive Strategy.
    </Note>
  </Accordion>

  <Accordion title="Missing image or need to update an image">
    If you notice that an image wasn't captured or you want to update an image, you can use the Capture Editor to replace the image. To replace an image, open the Capture Editor > Select the image you want to replace > Click **Upload Image** > Select an image from your local storage > Click **Save & Exit.** If the image is part of the background, you can select the empty element and use the Background feature to upload the image.

    <MediaCard url="https://training.navattic.com/j630mta" type="demo" title="Web Capture Technical Guide" />
  </Accordion>
</AccordionGroup>