Published mobile image placement is different than Webflow preview

Design help General
1

I’m new to Webflow. So far I love the tool, but I am seeing some significant differences between what I see on my device and what I see in the Webflow preview. I’ve watched all the Webflow tutorials and I am still a little stumped. I’ve also tried deleting and rebuilding the problem areas. No luck yet :blush:

Here is the published site http://bodyscience.xyz
And here is the read only link: https://preview.webflow.com/preview/bodysciencexyz?preview=d3801933c3700eaac2b760bc40d23348

  1. None of the headers images on any of the pages show up on my mobile device (OnePlus One using Chrome) as I have formatted them in Webflow (though when I use a standard browser like Chrome and Safari they seem to work).

  2. There is a thin bar running along the top of the image in mobile view on the “Observe” and “Experiment” pages (it looks like the gradient background I set).
    http://bodysciencexyz.webflow.io/observe
    http://bodysciencexyz.webflow.io/experiment.

3

I checked both url’s and each turned up the images just the same. To clarify, the images were out of alignment, not absent. Sorry for the confusion.

After that though, I tried removing the “fixed” image setting and now the alignment adjustments I made in the editor are working on my mobile devices. The frustration for me is that the preview in Webflow did not accurately represent what I saw in the wild. Good news is that this has been my only issue, so thank your your help :smile:

1 Like
4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.