How do I deal with sizing issues on mobile when using Wix?

Question

I realize this is a hyper-specific question but am hoping for some guidance. I use a Twine file (Harlowe 2.1.0) as a helpdesk for a "puzzle-subscription-by-mail" thing I do, hosted on my Wix website. https://www.gmsodality.org/help. It works really well, except it doesn't properly resize on smaller screens. The way Wix works is that it has you drop your html into a widget instead of uploading the file itself like on Wordpress.

Is there a way to edit the html of my file so that it'll respond to screen size appropriately? 

Two pieces of the stylesheet that may be relevant:

tw-sidebar
{
display: none;
}

tw-story
{
  background-color: #FFFFFF;
  font-family: "courier new";
   color: #000000;
  padding: 5%;
}

 

Answer 1

Thanks, everyone. Wanted to update this post in case anyone ever comes along and asks the same question. After a bunch of back and forth with Wix, it looks like there's no solution. Their response: "Unfortunately we are unable to provide support in regards to HTML iFrames and responsiveness on mobile."

They suggested trying to drop the iframe into their "strip" content block which supposedly *is* responsive, but that didn't work for me either. Maybe if I knew more about CSS and could hack this myself there would be a way around it, but out of the box, there isn't a good way to host Twine files on Wix.

Answer 2

I think your problem isn't that the twine story isn't responding to the page size, but that the Wix page is forcing the iframe that it puts your story into to be a non-responsive width.  So this is not really a Twine question, and while the problem looks hackable-around (if Wix will let you add some CSS) you might want to ask on a Wix forum for a more stable and permanent solution.

Comments

There is an #comp-jm2gqztb div element, which is a grand parent of the iframe element used to display the contents of the story HTML file. This element has an inline style attribute that is set to

left: 0px; width: 980px; position: absolute; top: 0px; height: 1105px;

... which is influencing the iframe element's calculated width & height values. (both of which are set to 100% of their parent's width & height.)

---

Sorry, I'm out of my depth here. I found the piece of code you mention. What would you advise I do to fix it?

---

The issue is that the site is controlling the values assigned to the #comp-jm2gqztb div element's style attribute, and the same is true for its parent elements.

eg. If you view the linked page within a mobile web-browser (or use your Desktop web-browser's Web Developer Tools to emulate a mobile device) you will see that the values of the style attribute (of both the #comp-jm2gqztb div element and its parent elements) are automatically changed.

---

Do you know how to add CSS to the Wix page (if that's even possible)?  If so, we could come up with some for you to put in there.  But it would be fragile and could break if anything changes in the future, on your end or theirs.  That's why I think you should ask in a Wix forum or their support instead; they may have a better workaround or a real fix.