Comments

• 

  Abersade

  Posts: 422 June 2022

  I have the same issue with my menu button on mobile as well, on two of my campaign sites (Stream of Kairos and Testbed), via Chrome 102.0.5005.78. I had always assumed that it was something in my CSS code. Which, I just tested this theory by removing all of the custom CSS from Testbed and viola the menu button works. Trying to pin it down now.

  GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

  GM of Core: The Ashes of Alcarna - April 2020 CotM

  GM of Stream of Kairos

  Need CSS Help? It may be covered here: Abersade's CSS Hub
• 

  Abersade

  Posts: 422 June 2022

  Hmm. On my Testbed site it was this:

  
  /* Clickable Banner Silliness */
  .bannerwut {position: absolute; top: -344px; left: -251px; width: 1570px;}
  div.bannerwut > a > img {width: 1570px;}

  Which doesn't directly make sense, since that targets a custom class. That would seem to indicate that it's the banner itself that caused the problem. Looking into the CSS of Stream of Kairos now to see what is related there.

  GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

  GM of Core: The Ashes of Alcarna - April 2020 CotM

  GM of Stream of Kairos

  Need CSS Help? It may be covered here: Abersade's CSS Hub
• 

  Abersade

  Posts: 422 June 2022

  Stream of Kairos has the following CSS which caused it:

  
  /* width */
       .wiki-page {width: 1015px;}

   

  GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

  GM of Core: The Ashes of Alcarna - April 2020 CotM

  GM of Stream of Kairos

  Need CSS Help? It may be covered here: Abersade's CSS Hub
• 

  Abersade

  Posts: 422 June 2022

  Given that both bits of my example CSS contain hard coded widths, I'd say that is what causes the issue. This could be solved by using an @media but I'm curious to understand why the menu won't open when the width is set statically. I would think it's too wide for the screen to handle, so maybe the menu IS opening and it's just not visible? I'm going to test this further to see if I can explain this behavior.

  GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

  GM of Core: The Ashes of Alcarna - April 2020 CotM

  GM of Stream of Kairos

  Need CSS Help? It may be covered here: Abersade's CSS Hub
• 

  Abersade

  Posts: 422 June 2022 edited June 2022

  Confirmed. Setting the .wiki-page class to anything exceeding 925px causes my menu button to just stop functioning. Works fine at 925 pixels, but at 926 pixels the button is dead.

  For my Stream of Kairos game I was able to change up my CSS as follows to compensate while retaining most of the previous width, this has the added benefit of making the front page work on mobile (before it was somewhat not surprisingly too large):

  
  .collapsable-nav-row .main-content-container {width: 64%;}
  .campaign-landing-show .campaign-landing-page-container {width: 100%;}
  .wiki-page {width: 100%;}

  You may need to adjust the percentage of the first row to compensate for your prefered site width.

  Post edited by Abersade on June 2022

  GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

  GM of Core: The Ashes of Alcarna - April 2020 CotM

  GM of Stream of Kairos

  Need CSS Help? It may be covered here: Abersade's CSS Hub
• 

  Abersade

  Posts: 422 June 2022

  In your specific case, I'm assuming you are referring to your Sylabyrinth site. The CSS there that appears to be causing the issue is the following bit, though at the time that I checked this is part of code that is commented out:

  
  .main-content-container {
  width:990px !important;
  }

   

  GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

  GM of Core: The Ashes of Alcarna - April 2020 CotM

  GM of Stream of Kairos

  Need CSS Help? It may be covered here: Abersade's CSS Hub
• 

  Calion

  Posts: 144 June 2022

  In your specific case, I'm assuming you are referring to your Sylabyrinth site. The CSS there that appears to be causing the issue is the following bit, though at the time that I checked this is part of code that is commented out:

  Okay, I'll see if I can fix that, but how do I switch it to the Desktop site so I can do so?
• 

  Abersade

  Posts: 422 June 2022 edited June 2022

  Usually browsers will have a "Desktop site" option that may work (unfortunately I'm no Safari expert), else you might have to see if Thaen can assist in some fashion. That said, on your site that code is currently not functioning as far as I can tell and I don't have a problem accessing it with my mobile browser. Give me just a few minutes here to put your CSS into my testbed site to see if I can replicate the issue.

  Post edited by Abersade on June 2022

  GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

  GM of Core: The Ashes of Alcarna - April 2020 CotM

  GM of Stream of Kairos

  Need CSS Help? It may be covered here: Abersade's CSS Hub
• 

  Calion

  Posts: 144 June 2022

  Usually browsers will have a "Desktop site" option that may work

  Mobile browsers do, but I'm using a desktop browser. For some reason, it goes straight to the mobile site.
• 

  Abersade

  Posts: 422 June 2022

  You should be able to get to the settings page here: https://calion-sylabyrinth.obsidianportal.com/settings

  I am unable to replicate the issue with your CSS code as it is shown here: https://sylabyrinth.obsidianportal.com/custom_css

  I'm sort of at a loss as to the exact cause of your issue. Is there perhaps a setting in your browser that is defaulting the screen or site to a higher width? If so, then try disabling and retesting, else maybe download an alternative browser (at least for temprorary use) to see if the issue is still present there. If there is no setting in the browser and multiple browsers are impacted I'd look to see if there's a zoom setting for the mobile device itself that may be interfering.

  It may also be useful to get someone else local to you that can test it so that you can see what they see when they visit the site.

   

  GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

  GM of Core: The Ashes of Alcarna - April 2020 CotM

  GM of Stream of Kairos

  Need CSS Help? It may be covered here: Abersade's CSS Hub
• 

  Abersade

  Posts: 422 June 2022

  It occurs to me that I may have misread something. Are you only able to access the mobile version of the site from a desktop computer running Safari?

  GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

  GM of Core: The Ashes of Alcarna - April 2020 CotM

  GM of Stream of Kairos

  Need CSS Help? It may be covered here: Abersade's CSS Hub
• 

  Abersade

  Posts: 422 June 2022

  If so:

  * https://discussions.apple.com/thread/6659813

  * https://www.mobilejoomla.com/forum/16-device-detection/6792-mobile-site-is-displayed-on-my-desktop-browser-macosx-safari.html

   

  GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

  GM of Core: The Ashes of Alcarna - April 2020 CotM

  GM of Stream of Kairos

  Need CSS Help? It may be covered here: Abersade's CSS Hub
• 

  Calion

  Posts: 144 June 2022 edited June 2022

  It occurs to me that I may have misread something. Are you only able to access the mobile version of the site from a desktop computer running Safari?

  Yes, my desktop Safari only accesses the mobile site, and will not load the desktop site. I've already cleared cookies for that site and tried changing the user agent. However, this only happens for SyLabyrinth, not any of my other campaigns or other parts of OP.
  
  Hm…on the other hand, trying the zoom trick seems to have worked. Resetting the zoom level for the page brings back the regular site, and when I zoom in again sufficiently to go back to the mobile site (why does it do that at all?), the Menu button works.
  
  Very odd. But you figured it out, so thanks.

  Post edited by Calion on June 2022