Why are the thumbnail images not displaying on certain projects in the exported version of my Webflow portfolio site, specifically on mobile, when they appear fine in the Webflow preview?
TL;DR
- Ensure all images are included and correctly linked, especially for CMS content which must be manually added when exporting.
- Verify case-sensitive file paths, responsive visibility settings, media queries, and check for hidden or missing images using browser Inspect tools.
Thumbnail images not displaying on mobile in the exported version of your Webflow portfolio, despite working in preview, is usually due to missing asset references or CSS/media-query issues after export.
1. Check That All Assets Are Exported
- When exporting your Webflow site, ensure images are properly linked and present in the
/images/folder. - If you're using CMS-driven content, remember that Webflow does not export CMS items—you'll need to manually add those images and data or replace them with static elements for export.
2. Inspect Case Sensitivity and File Paths
- Ensure image file paths are case-sensitive, especially on servers like Linux that enforce it.
- Double-check that the image URLs in the exported HTML/CSS actually match the names in your exported assets folder.
3. Review Responsive Visibility Settings
- Go to each thumbnail image in the Webflow designer and check the responsive visibility settings in the Style panel (e.g., make sure Display is set correctly for Tablet and Mobile).
- Disable any custom Display: none settings set on mobile views by accident.
4. Check Custom Code or Interactions
- If you’re using custom code or load-triggered animations on those images, test whether they are interfering with their rendering on mobile after export.
- Sometimes, lazy-loading or scroll interactions delay or block image rendering, especially if JavaScript fails to initialize.
5. Look at Media Queries in Exported CSS
- In your exported CSS, check media queries affecting those thumbnails; make sure they're not hidden on breakpoints inadvertently.
6. Use Browser Developer Tools
- On the live exported site, use Inspect Element on mobile to check if:
- The image elements are missing entirely,
- Their paths are broken (404 errors),
- They're hidden due to CSS like
display: noneoropacity: 0.
Summary
If thumbnail images work in Webflow but disappear on your mobile exported site, it’s likely due to missing assets, incorrect paths, visibility settings, or media-query conflicts. Carefully inspect your exported files and responsive styles to ensure everything is linked and rendered correctly across breakpoints.