Missing CSS when transferring site

Support
#1

Hey,

I’m coming up with a weird issue when migrating a local site to a Bluehost account. Some of the CSS appears to be missing. The files are intact, but things look weird. The fontawesome icons aren’t showing up in the site menu, the submenus appear over the main menu instead of under it, some basic CSS classes like .alignright don’t work, etc.

I am using the latest versions of Pro and WordPress. I have tried migrating the site using different methods: git repo + wp-sync-db, wp-cli, Duplicator, Updraft Plus, WP Migrate All In One, regular sFTP + phpMyAdmin export/import… All have the same results. Migrating to another webhost, like a digitalocean droplet, works fine. I contacted Bluehost and everything appears to be fine on their end.

You can take a look at the website on Bluehost (http://bdestrempes.com/marian-rose/) and DigitalOcean (http://138.197.153.208/marian-rose/). Look at the menus and the home page content. The image on the page has the .alignright class but the CSS doesn’t show up in the Inspector. The CSS file associated with the class does show up in the <head> section and the Sources view in the Inspector. It’s just never applied.

Loading up the page in the Pro content editor shows the same thing, but oddly enough, editing the text area in visual mode shows the image in the right place. See http://www.bdestrempes.com/marian-rose/pro-broken.jpg and http://www.bdestrempes.com/marian-rose/pro-editor.jpg

I am a bit at a loss here. Any ideas?

#2

Hi There,

Thanks for writing in! Upon inspecting your sites, I see that your icons added to the menus are missing in the migrated site. Also I don’t see any console log errors or Cross-Origin Resource Sharing issues (CORS).

For example here’s the DigitalOcean menu item (https://snag.gy/lnvEjd.jpg) and here’s the BlueHost menu item (https://snag.gy/0Gh9UW.jpg). This issue also could be due to different database backup that you’re using.

Try following our migration guide here (https://theme.co/apex/forum/t/cornerstone-migration/126).

Let us know how it goes.
Thanks!

#3

Hey, thanks for the reply.

I can see that, however, the icons are set in the menu and in the header builder. Settings are exactly the same on both sites. I have tried recreating the menus and turning off and on the icons in the header builder. The menu and the button in the header builder change shapes and position when disabling or enabling the graphic setup option to indicate that the icons’ positions are set, but the icons themselves don’t show up.

I followed your migration guide but got the same results.

#4

Hi there,

Since you’re on CloudFlare, please make sure the Javascript and CSS minification is turned off, then purge you CF’s cache. Or you may pause or turn off your CF while you’re testing.

There is a missing CSS in your live site’s integrity-light.css

[data-x-icon], [class*="x-icon-"] {
    display: inline-block;
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

And maybe that’s due to your CF minification.

Thanks!

#5

…that was it. I had totally forgot I had Cloudflare enabled for another website on the same domain.

Thank you so much for the help. This was driving me crazy!

#6

Hi @bdestrempes,

No worries. Thanks for letting us know.

Feel free to ask us again.

Thanks. :slight_smile: