Website preview and publish look different

okay so when i preview my website it looks like this and looks fine

but as soon as i publish it and go to the website link it looks like this please help

Post the link to the website. It appears as though the site isn’t loading the CSS file.

1 Like

Ya make sure you upload all the files that BSS exports, and don’t move them around in different locations reorganizing or anything. They need to stay in the position they are at in order to be read correctly by the browser.

im hosting it on bss so i dont have to export it

i have fixed it its all good now

Glad you got it worked out. I was going to have a look at it in after I finished the update I’m working on, but now you are all set. Good job!

so apparently every HTML file uses every single CSS file and I didn’t know that so I had another CSS file conflicting by any chance do you know of a way to remove CSS files from certain HTML files?

Yes, in a typical website, CSS files are global (loaded on every page) and the rules affect every component to which a particular class is attached. So if you go into your custom stylesheet and write a new .col class and change the rule max-width: 100%; to max-width: 80%; it is going to affect EVERY column throughout your website.

Be very careful when changing the standard bootstrap classes because this will affect every part of your entire website! Generally speaking, it’s best not to mess with the standard Bootstrap classes.

Normally, when you want to change the CSS characteristics of just one HTML component, you create a new CSS class (or ID) with a unique name, add your desired rules, and then assign that class (or ID) to ONLY the specific HTML component in question via the Class Names field in the ATTRIBUTES section of the HTML panel.

Also, if you right-click a CSS file in the Design > Styles tab, you will see an option called “visibility” which allows you to assign CSS files on a per-page basis. This can be helpful in terms of website loading speed if, say, you have a single page that is styled by a large, dedicated CSS file. You would “turn off” that CSS file on all the other pages in the website, so they don’t bother to download it from the server.

You may also want to refresh yourself on how the “Cascade” function of Cascading Style Sheets (aka CSS) works. CSS uses a very specific hierarchy and syntax.