β–Ό
Streaming live at 10am (PST)

Absolute positioning not styling correctly after export due to image file name breaking css


#1

Hi,

I've finished a site on Webflow recently, but after export the stylings seem to be all off. My coding knowledge is pretty rudimentary so thought it better to ask you wonderful people before I confuse myself too much.

Here is the read-only link: https://preview.webflow.com/preview/mendip?preview=5e371629c749eb9115a38332bbbbecb5

And here is the site, uploaded to a personal domain for preview – this is also how the site renders when I use live preview from Brackets: http://maxwelljeffery.com/

Does anyone know what's causing the inconsistencies?

Thank you!
Max


#2

@Maxwell - This is a shot in the dark, but I noticed that the element "Dyslexic Pop Up Tab" is showing the Warning Icon in the Position settings. It's asking to "Add position relative to parent".

Try placing the Dyslexic Pop Up Tab under the Nav section, and then change the Nav section to Position: Relative. Then republish and see if that fixes it.

(Could be totally off base here. Still learning myself!)


#3

Thanks for the advice, will try your suggestion and report back!


#4

Hey @MetaFlare – I've tried making parent elements relative but doesn't seem to make a difference :sweat: Really appreciate your suggestion though!

I suspect this is my fault rather than Webflow's (so I've moved from bugs to code help…) but I'm not managing to narrow it down so far by looking at the code.

My problem seems to be that any element with absolute positioning is displaying incorrectly after export. My read only link is here

I've attached some screenshots for further reference:

I'm inspecting the element "dyslexic-pop-up-tab" in both screenshots. You can see that while on Webflow it is being styled correctly, but after export it only inherits the values from "body-background". This kind of thing is happening on other absolute positioned elements as well.

On webflow mendip.webflow.io

After export on my personal domain

This has got my stumped but I'm very curious to learn – if anyone can help out I will be very very grateful!


#5

Hello, @Maxwell

I noticed you have the image uploaded to the project which has an apostrophe in its name. It is usually the reason in such cases, when css file does not load properly.

Try to re-mane the image (without using any special characters) and re-upload it to the Webflow project. Then export. Or go to css file and fix the name


#6

@sabanna thank you so much! I never thought that having the one image file named incorrectly could cause the rest of my site to behave like that :no_mouth:

After renaming the image the entire site is now displaying correctly. Thanks again!


#8

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