Streaming live at 10am (PST)

Custom Code Misalignment


#1

I have an object (an interactive map) built with html/css/js that I’m trying to embed with custom code. I’ve added the necessary script to the head in my Project Settings but when I place the object inside a center-aligned container within a section and publish, the object shows up perfectly functional, but left aligned (outside the container) and below the section it’s been placed in.

Probably difficult to debug without seeing the code, but any ideas as to why the container alignment isn’t translating to the object I’m dropping into it? Don’t assume I’ve tried anything/everything - this could be something very simple I’m overlooking.

Thanks!


#2

indeed difficult without seeing any code nor screenshot.


#3

Yep - a published link and an example of the code you are using will ideally be needed for others to help you work this out, and don’t forget the good old read-only link:

:slightly_smiling_face:


#4

Very helpful, thanks. Here’s the shareable link to the un-published site: https://preview.webflow.com/preview/retv?preview=d12d789b049b0414b0b9eb104aee6272

In the designer, the dummy code block is centered in the container, but when published, it shows up like so:

I’ve published the - broken - site to https://retv.webflow.io so you can see it in action.

Any ideas?


#5

Hmm, I can’t actually see the map on the published site at all !

I’m not a coder per se, but something in the code is overriding the Webflow styling you’ve added…

@mistercreate @cyberdave - custom code heroes - any thoughts on this one?


#6

Strange - I’ve loaded it in a few different browsers (incl. mobile) and I see the map every time, as in the image pasted in my prior comment.


#7

Hmm, the plot thickens!

Here’s Chrome (standard or incognito), Firefox and Safari for me:


#8

Strange… what I can’t figure out is why it not only works on my computer - where I’m logged in to Webflow, have the .json file on my hard drive, am logged into GitHub where the data is hosted, etc. - but also on my phone (Chrome for iOS) where none of the above is true.