What can I do to fix the discrepancy between what I see on live preview for desktop in Webflow and what my friend sees when he opens the preview?

Published on
September 22, 2023

If you have noticed a discrepancy between what you see on the live preview for desktop in Webflow and what your friend sees when they open the preview, there are a few potential issues that could be causing this. Here are some steps you can take to help address and fix the discrepancy:

  1. Clear cache: Your friend's browser may have a cached version of the website, which could be causing the differences in the preview. Ask your friend to clear their browser cache and then reload the page to see if this resolves the issue.

  2. Check for different browser versions: Different browsers can interpret code and render websites differently. Ensure that both you and your friend are using the same browser and version to view the website. If not, try using the same browser to see if the issue persists.

  3. Confirm responsive design: Webflow allows you to create responsive websites that adapt to different screen sizes. Check that the discrepancy is not due to your friend viewing the website on a different device or viewport size. Test the website on different devices and screen sizes to ensure consistency.

  4. Review custom code: If you have added custom code to your Webflow project, such as HTML, CSS, or JavaScript, check if it could be causing the discrepancy. Test the website without any custom code to see if the issue still exists. If removing the code resolves the problem, review and debug the code to identify any conflicts or errors.

  5. Inspect browser console: Use the browser's developer tools to inspect the browser console for any errors or warnings. These could shed light on potential issues causing the discrepancy. Fix any errors or warnings and test again.

  6. Publish changes: If you've made recent updates to your project in Webflow, make sure to publish the changes for them to take effect in the live preview. If you haven't published the changes, your friend might be seeing an older version of the website.

  7. Share project settings: Ensure that you and your friend are using the same project settings in Webflow. Check if there are any differences in publishing settings, such as staging vs. live publishing, which could affect the appearance of the website.

By following these steps, you should be able to identify and address any issues that are causing the discrepancy between the live preview in Webflow and what your friend sees. Remember to test the website on multiple devices and screen sizes to ensure a consistent experience for all users.

Additional questions:

  1. How can I troubleshoot responsive design issues in Webflow?
  2. What should I do if my Webflow website looks different in different browsers?
  3. How do I debug custom code in Webflow to fix any issues with the live preview?