Hello HubSpot Community,
We’re currently facing a critical issue within our organization and could really use your expertise and assistance.
Problem: Despite configuring our landing pages correctly within HubSpot, we’re encountering a significant discrepancy when they are published and accessed on our website. The layout and appearance of the pages are different from what we intended. What’s particularly puzzling is that the page seems to change its appearance after it’s loaded
Example: One of our landing pages is a prime illustration of this issue . You can view the page here.. However, upon publishing and accessing the public page, it appears severely misconfigured, impacting our online presence and user experience negatively.
Hi, @EApostolidis 
Thanks for your question.
Can you be more specific about what the unwanted or unexpected JS that is being added? When I open an incognito tab and open the Inspector tool, GTM shows to be the main culprit in your page loading and speed issues. Hey @Jnix284 @Phil_Vallender, do you have any optimization tips for @EApostolidis?
Thanks for looking! — Jaycee
@EApostolidis as @Jaycee_Lewis mentioned, I’m not seeing a JS error in the console.
Can you share a screenshot of the landing page from the editor where it renders correctly? and also a screenshot of the live page where it is not correct?
Please also check the page head HTML (via page editor settings) and site head html (via hubspot settings) for any scripts added and share a screenshot of those as well.
This would help isolate what’s going on.
Hi @Jnix284 @Jaycee_Lewis !!
I’m attaching screenshots of the page from the Hub and the published page, as well as the header in HubSpot (which is blank). In addition to the form adding this pink background, some texts and images are in different sizes and formats.
Thank you!!!
Thank you for the screenshots @EApostolidis - when I initially load the page, I see the correct version, then additional styles are applied and the design changes.
This doesn’t look to be a JS issue, rather a CSS issue where there are inline styles that are higher priority than the theme styles.
The code for the pink background is coming directly from <style> tags:
This is located in the page code:
When expanded, there is an entire stylesheet added inline:
Removing these overwrites I can see the correct styling:
What’s really strange is that all of this is outside of the <head> tags and within the <body> tags of the page - including GTM tags, meta data, etc.
It looks like you’ve somehow embedded an entire page within another page…
Can you share a view of the page editor with the contents tab on the left?
Also from the sprocket menu on the live page, click Edit Template and share a screenshot of the code for the template file.
