Heroku CSS renders differently using Subdomain

Question

I have an app on Heroku that uses a Subdomain. Depending on the link being used the CSS will render differently.

This is made obvious if you ctrl + shift + i to inspect the page on both of the links and switch to responsive view such as iPhone X.

Original Heroku URL: https://cryptosave-signup.herokuapp.com/

Subdomain URL: http://signup.cryptosave.co.uk/

I'm not too familiar with how Subdomains work but when inspecting the source of the files, it seems like the subdomain URL is wrapped in a frame of some sort.

How do I enable the Subdomain to render the CSS just like the Original Heroku URL?

My tech setup:

Domain provided by GoDaddy
CName added to forward Signup.Cryptosave.co.uk
Heroku Added signup as subdomain

Could this question's answers help? https://stackoverflow.com/questions/27227214/media-queries-not-working-inside-an-iframe — Pierre C., May 14 '18 at 11:57
@PierreC. Thanks that helped me further diagnose the issue and it turns out it was a GoDaddy problem not Heroku. — Justin, May 15 '18 at 08:43
If you have solved your problem, you can answer your own question to help others who might have the same issue — Pierre C., May 15 '18 at 08:53

score 0 · Accepted Answer · answered May 15 '18 at 09:04

For anyone else who has a similar issue:

When you FORWARD a Subdomain with GoDaddy with Masking ON (usually to hide an ugly URL) then the side effect is that GoDaddy will wrap your website in an iFrame.

The issue with this becomes noticeable on mobile devices as the website no longer uses media queries.

Unfortunately, there is no option to add code to amend the iFrame for responsiveness.

To get responsive subdomains, you'd have to unmask your subdomain.

Heroku CSS renders differently using Subdomain

1 Answers1