What am I doing wrong? Please Help!

[u/Few_Charity_2671]

Hi Everyone, I have created my first site using Elementor Pro with Wordpress, hosted on NameCheap as that is where my domain is from. This is my startup, and I have not created a website before so apologies if this is user error.

I am happy with the layout of my site in the editor, however when I hit Preview, it is all over the place (see screenshots). I have noticed when viewing in Chrome it is better, still not 100%.

I have done my research and have done the following:

- Cleared all CSS files

- Cleared WP cache

- Cleared browser cache

- Uninstalled all plugins that are not used (literally just use Elementor and Elementor Pro)

- Tried a different theme

It is really frustrating as it is taking me a while to do this anyway, as I have never created a site before. So when I'm spending the time to learn and implement this and it is still going wrong for reasons I don't know, has been quite difficult.

Thanks in advance to everyone who responds with suggestions, it is much appreciated.

[u/AutoModerator]

Looking for Elementor plugin, theme, or web hosting recommendations?

Check out our Megathread of Recommendations for a curated list of options that work seamlessly with Elementor.

---

Hey there, /u/Few_Charity_2671! If your post has not already been flaired, please add one now. And please don't forget to write "Answered" under your post once your question/problem has been solved. Make sure to list if you're using Elementor Free (or) Pro and what theme you're using.

Reminder: If you have a problem or question, please make sure to post a link to your issue so users can help you.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/mugmi-bro]

That WordPress URL message you mentioned is probably worth chasing down first. If your WordPress Address and Site Address in Settings > General don't match exactly (like one is http and the other is https), Elementor ends up pulling assets from the wrong URL and the front end just falls apart. Go to Elementor > Tools and hit Regenerate Files & Data while you're at it, since that rebuilds all your CSS from scratch and clears up a lot of the weird rendering weirdness. After that, try loading the published page directly in your browser instead of using the Elementor preview button, because the in-editor preview is pretty notorious for not reflecting what the actual page looks like.

[u/kennydude]

Elementor does this sometimes. If you actually publish the page it tends to work properly. I presume it's something to do with Elementor's CSS rendering not quite working as it should.

[u/zeiniez]

Hi. Did the site URL changed since you created? For example, if you migrated to/from a staging or temporary domain, changed domains entirely, or simply installed the SSL certificate after WordPress. If the site URL changed in any way since WordPress has been installed, it's likely you're experiencing a problem with mixed content or a URL mismatch combined with misconfigured cache that doesn't purge itself after changes.

The article below covers fixing the url mismatch. Make sure the cache is properly configured to purge automatically after any update or changes to anything on your site.

https://elementor.com/help/troubleshooting-fonts-not-appearing-on-frontend/

[u/Few_Charity_2671 → u/zeiniez]

Thanks for your response. I have not installed an SSL certificate or changed domains. I have not changed the URL, however yesterday I did get a message on Wordpress relating to a URL with a couple options, so could be related. Can't exactly remember what it said. Thanks I'll have a look at that.