Exported CSS fails to load correctly if uploaded file name has an apostrophe in it

Something is wrong with exported files maybe something is missing with them i have topic this before but no one answered me correct please help now, I’m becoming sad my project in Webflow is : https://preview.webflow.com/preview/naitreno?preview=7b0607904ccccee18544cb7181820506

and this is exported files inside hosting : http://naitrenotst.esy.es/

Please Webflow staffs help me as fast as possible.

I downloaded all of your files onto my local computer… and there is
definately something wrong.

It looks like the CSS file is not being loaded correctly.

Am looking at it now. Will see what I can find out.

@webflow, @PixelGeek, @cyberdave, @brryant, @thesergie

hmm… I just added your index.html file
and your css/naitreno.webflow.css
into my project… and it still failed to display correctly.

Did you change anything in index.html or naitreno.webflow.css ?

No, I didn’t and @cyberdave said every thing is right in my project :frowning:

I found the problem.

It’s in your “naitreno.webflow” css file… line 52.

You have a class named “picture-2”.

Notice the apostrophe after Assassin and before the S.

In the exported code…

.picture-2 {
  background-image: url('../images/Assassin'S Creed.jpg');
}

For you to quickly test this…
Remove the apostrophe (in your exported code)
from Assassin’S Creed.jpg
and reload your site (in the browser)

so you end up with

.picture-2 {
  background-image: url('../images/AssassinS Creed.jpg');
}

You MIGHT come across another issue with the SPACES in the image file names.

I never put spaces in any name. For separation… I only use underscore _ or dash -
And use lower cases on every file name / image name.

for example:

.picture-1 {
  background-image: url('../images/Rio 2.jpg'); // should be
  background-image: url('../images/rio-2.jpg');
}

.picture-2 {
  background-image: url('../images/Assassin'S Creed.jpg'); // should be
  background-image: url('../images/assassins-creed.jpg');
}

If I were you… I’d go back and rename all my image files (to proper names) - and reload them into your project.

2 Likes

Good job finding the apostrophe in the filename @Revolution (:

Thank you @Revolution Now I have to make all my styles in small letters, But I’ve styled another things does they all needs to be restyle or what ?

All the style names are converted to lowercase and any spaces in the names are converted to dashes -
So you don’t need to change any of that in the project.

What @Revolution is talking about are your image names. Rename them with lowercase letters and add a dash - or underscore _ where there are spaces between words.

Once they are renamed re-upload them to your project.

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