Website looks fine in preview, but glitches when published

Hi Webflow Friends,

Appreciate any help with this issue I’m having – my preview site for mobile looks fine, but when I check the published site on my iPhone, it’s super glitchy, and basically unusable.

I’ve got a bunch of custom code going on, which probably doesn’t help much – and I’m just not sure of the best way to resolve this! Meanwhile client is waiting for website… :grimacing:

Thanks in advance!
Lizzie





Here is my site Read-Only: https://preview.webflow.com/preview/chris-frazer-smith?utm_medium=preview_link&utm_source=designer&utm_content=chris-frazer-smith&preview=7bd720226e57680b6ee544f02fd47ab9&pageId=5d036b0eeb9664da01772687&itemId=5d036c09bebda8befcbbc4fe&mode=preview
(how to share your site Read-Only link)

Good morning @lizziekevan Lizzie,

So I have many questions?

  1. Why do you have a custom slider and just not use the pagination feature within Webflow?

  2. Why are you not using the new CMS-Gallery feature that Webflow has to offer?

  3. Also, why a horzScroll feature? This could be messing with your mobile function.

You can create a Masonry Mosaic with help from this feed: http://thinking-twins.webflow.io/masonry-layout

Happy Designing,
Brandon

Hello @QA_Brandon Brandon!

Thank you for your reply!

  1. To be honest, I didn’t know this was a thing! I’ve been looking into the slider function for a while and the Cycle2 solution was the only thing that was coming up that works with the CMS. Also I asked the Forum a few months ago when I began this project and someone said it couldn’t be done in Webflow without custom code…

A big functionality must for this site is the ability to click between gallery and thumbnail mode (clicking a thumbnail takes you to the corresponding image in the slider) Can this still be achieved with pagination?

On the individual project pages I’m using the multi-reference field to populate the images, can this be done with pagination too?
http://www.chrisfrazersmith.com/projects/commissioned

  1. I began the build this before this feature was released. I looked into it, but in the multi image field I saw you can only upload 25 images, whereas my client has more than that per project. Also I don’t think you can customise the lightbox feature, meaning it would be the black background with thumbnails underneath. Unless you know otherwise?

  2. This is for the swiping on mobile. You think that’s what’s causing the issue?

Thank you for your help, very much appreciated!
Lizzie

Hi @lizziekevan,

  1. yes you could use the one item feature for pagination, however, you wouldnt be able to use it like a slider functions, so this may be out.

The CMS-Gallery feature might be best for you. Even though it is limited to 25 images per field on the CMS plan you can have 30 fields per item. Meaning you could in reality have 25 slideshows with up to 750 images per post. Although even as a form photographer I never wanted that many images per post on my website. The site is meant for the good/great images. lol.

You could potential change the black/faded bg to another color/fade with custom code.

  1. yes, I believe this is what is causing your mobile issues.

Hi @QA_Brandon,
Thanks for this! Do you think that it would be possible to re-create the exact layout and functionality I have now, but with the CMS gallery feature?

So that when you land on the page you have a slider with the option of switching to a thumbnail view, and when you click a thumbnail it goes back to the slider?

Thank you!

@lizziekevan, first let me say this that the CMS-Gallery feature at this moment only works natively within Template pages, not on static pages. So depending on where the galleries will be placed would give you your answer.

Now if placed on a template page, you would be able to use the lightbox feature. Set one as the starting point and then use the others as your thumbnails. Again, this works for the Lighbox feature only at this time.

Hope this helps/answers your questions.

Happy Designing,
Brandon

Thanks @QA_Brandon!
So at this time, I don’t think the CMS gallery will work for me, as I need to use it on both a static page and a template page :thinking:

So, let’s say I have to resort to making a custom slider and not using the CMS gallery feature… And I remove the horzScroll feature (which I have now done), any clue as to why it’s not displaying well on mobile?

Thank you so much!
Lizzie

Please reattach your adjusted Share link?

https://preview.webflow.com/preview/chris-frazer-smith?utm_medium=preview_link&utm_source=dashboard&utm_content=chris-frazer-smith&preview=7bd720226e57680b6ee544f02fd47ab9&mode=preview

@lizziekevan,

Now that you have removed the HorzScroll it looks much better.

However, I am not sure what your issue is here now.
Can you please make a GIF or Screen Recording of what you are seeing?

I have to be missing something on my end that you are seeing on your end.

@QA_Brandon

No worries at all! I was having the same issue! In the designer, in the preview and on desktop it all looks fine – it’s only when I look at it on the phone that it suddenly looks so terrible…

Here’s the home page:

and here’s what happens when I tap ‘show thumbnails’:

And here’s what it looks like when I navigate to Photography>portfolio:

If it was looking like that in the preview I feel I would know at least in some way how to fix it - but I just don’t know where to start really!

Thank you for looking into this!
Lizzie

Hi @QA_Brandon,
Well, I’ve been working away over here (amazing how panic is a good motivator! :grimacing:)
I managed to fix most of the the crazy mobile layouts basically by accident (changing the height of the content section to auto rather than 100%)
I also implemented your masonry layout which has helped a lot, thank you!

I duplicated the site and started to play with the CMS lightbox feature to see if I could get it working – with some success, so overall, I am slightly closer to not being fired today. Thank you for your kind help.

Lizzie

1 Like

Hi @QA_Brandon! Hope you’re well – Just wondering if I can call on you for one more thing related to this project?

I have implemented the masonry.js, but every now and then the images appear all on top of one another. Any idea why this might be?

Thanks for your help!

Looks fine:


Doesn’t look fine…

https://preview.webflow.com/preview/chris-frazer-smith?utm_medium=preview_link&utm_source=designer&utm_content=chris-frazer-smith&preview=7bd720226e57680b6ee544f02fd47ab9&mode=preview