IFrames are messing up my HTML Responsive web site, oh the drama of it all! Long live hamsters!

In remembrance of my recently departed (and perfect in every way hamster) Snowflake Brownie, I created a new web site dedicated to all things hamster: http://www.myhamsterzoo.com that utilizes HTML Responsiveness (so basically the web site lays out in 3 nice columns when the web site is viewed on large monitors and then morphs into 1 nice column when the web site is viewed on small devices like smart phones).

My provider, Network Solutions, offers web forwarding so since I already have an existing web site, my plan was to create a page on my existing web site and forward this new domain of http://www.myhamsterzoo.com to my new page (http://www.mummey.com/myhamsterzoo.aspx) on my existing web site. All was well at first. HTML Responsiveness was working as expected with web forwarding turned on but then I went one step further in the options of web forwarding and selected the option to have the URL masked from the visitor (this means the user, when visiting http://www.myhamsterzoo.com, would be forwarded to http://www.mummey.com/myhamsterzoo.aspx but the user would not see http://www.mummey.com/myhamsterzoo.aspx in the address bar, the user would continue to see http://www.myhamsterzoo.com. Unfortunately, taking advantage of this additional web forwarding feature of masking broke the HTML Responsiveness.  With this masking feature turned on, the web site remained in the 3 column layout no matter what size the monitor was so I have since turned this masking feature off so that HTML Responsiveness will work.

I believe the reason this has occurred is associated with the masking feature dumping this web site into an iFrame and the tags in the iFrame may not contain things needed by HTML Responsive layouts (i.e. meta tag like meta name=”viewport” content=”width=device-width, initial-scale=1.0″), even though I have these requirements in my page.  I’ve notified Network Solutions regarding the matter just in case they have a solution or alternate options.

Critical Side Note:

In researching what domains were available that contain the phrase “hamster” for this project, I learned there are quite a few “hamster” sites out there that are beyond disturbing so I would recommend absolutely positively NOT incorrectly typing this url (http://www.myhamsterzoo.com) when attempting to visit my awesome new hamster care web site and make ABSOLUTELY SURE that if you mention my hamster care web site to anyone that you check, double check and triple check that you gave them the correct url of http://www.myhamsterzoo.com because holy molasses on a cracker with a shot of whiskey, you don’t want to go to the wrong hamster url, unless of course you want to harbor horrific memories that will forever carve out a cozy section of your brain for quiet nights when you are feeling vulnerable and are questioning the existence of humanity.

Advertisements

Blog at WordPress.com.

Up ↑