Solved Firefox with fabrikar.com

[gstyles]

FYI, I recently tried to download the latest Fabrik from the site and I couldn't access the tab "9 files" to go to the downloads, it turns out I use a large monitor and the viewing level showed a completely broken page with a menu rather than the normal hamburger menu. Eventually I reduced the browser width so that it shows the hamburger menu and then everything displayed as normal. This probably wont affect most users but if you have the same problem the fix is easy. ps this doesn't happen with chrome or edge browsers.

 

[troester]

I can't see an issue with Firefox with a large screen.
Do you have a screenshot?
Or can you see anything in your browser console?
Which OS do you have on your computer?

BTW: I moved this thread to
https://fabrikar.com/forums/index.php?forums/fabrikar-com-website-subscriptions-forum.111/

 

[gstyles]

I can't see an issue with Firefox with a large screen.
Do you have a screenshot?
Or can you see anything in your browser console?
Which OS do you have on your computer?

BTW: I moved this thread to
https://fabrikar.com/forums/index.php?forums/fabrikar-com-website-subscriptions-forum.111/

Good day,I am using win 11. attached screen shot.

 

[troester]

Where is 160% coming from?

Do you have some tool for increasing e.g. font sizes?

 

[gstyles]

Console errors.
Warning! fabrikar.com:64:13
This browser feature is aimed to developers only. If you were instructed to copy something here to enable some kind of 'hidden feature', in reality it's an attempt to compromise your account fabrikar.com:65:13
For further info see https://en.wikipedia.org/wiki/Self-XSS fabrikar.com:66:13
Expected media feature name but found '-ms-high-contrast'. content.css:1:1807
Expected media feature name but found '-ms-high-contrast'. content.css:1:1832
Expected media feature name but found '-ms-high-contrast'. content.css:1:2229
Expected media feature name but found '-ms-high-contrast'. content.css:1:2276
Expected media feature name but found '-ms-high-contrast'. content.css:1:2801
Expected media feature name but found '-ms-high-contrast'. content.css:1:2848
Expected media feature name but found '-ms-high-contrast'. content.css:1:3379
Expected media feature name but found '-ms-high-contrast'. content.css:1:3427
Expected media feature name but found '-ms-high-contrast'. content.css:1:3953
Expected media feature name but found '-ms-high-contrast'. content.css:1:4001

Error in parsing value for '-webkit-text-size-adjust'. Declaration dropped. bootstrap.min.css:6:2312
Unknown pseudo-class or pseudo-element '-moz-focus-outer'. Ruleset ignored due to bad selector. bootstrap.min.css:6:33319
Ruleset ignored due to bad selector. bootstrap.min.css:6:33877

Unknown property '-moz-transition'. Declaration dropped. bootstrap.min.css:6:34200

Unknown property '-moz-transition'. Declaration dropped. bootstrap.min.css:6:34517
Unknown pseudo-class or pseudo-element '-moz-placeholder-shown'. Ruleset ignored due to bad selector. bootstrap.min.css:6:35846
Unknown pseudo-class or pseudo-element '-moz-placeholder-shown'. Ruleset ignored due to bad selector. bootstrap.min.css:6:36464

Unknown property '-moz-osx-font-smoothing'. Declaration dropped. joomla-fontawesome.min.css:1:232

Unknown property '-moz-osx-font-smoothing'. Declaration dropped. joomla-fontawesome.min.css:1:852

Unknown property 'speak'. Declaration dropped. joomla-fontawesome.min.css:1:84979

Unknown property '-moz-osx-font-smoothing'. Declaration dropped. template.css:2:123

Error in parsing value for 'line-break'. Declaration dropped. template.css:2:519

Error in parsing value for 'grid-template-rows'. Declaration dropped. template.css:2:22658

Unknown property '-moz-border-radius'. Declaration dropped. template.css:2:41338

Error in parsing value for 'border'. Declaration dropped. template.css:2:71327

Error in parsing value for '-webkit-animation'. Declaration dropped. template.css:2:73726

Error in parsing value for 'animation'. Declaration dropped. template.css:2:73765

 

[wezetel]

Looks like you have in your FF view settings zoom enabled (Text only)

 

[gstyles]

I use the cntrl mouse wheel to increase text size ,interestingly 140% fine 160 % stuffed 180% fine? I am old and my eyes are tired so I increase text size per site for my convenience.

 

[gstyles]

@wezetel no that option is unchecked.

 

[wezetel]

Strange. On my FF I get the same picture like yours only, when 'text only' is enabled in the zoom-settings, otherwise the picture is correct

 

[troester]

I can't replicate, too.

If you don't have this "Zoom text only" option enabled, which shows the warning about display issues then maybe it's just an unsuitable combination of screen with/resolution, zoom factor and responsive breakpoints in your case.

 

[gstyles]

Weird it is only firefox what does it. Just checked on a J5.3 site with Cassiopeia and it doesn't do it, must be a helix issue.
For most people it will not be a problem

 

[troester]

I added a bit of custom CSS for the header, maybe it will help.
But it seems that Firefox acts differently with regard to responsive breakpoints and zooming.

On my site it doesn't switch to mobile view (hamburger menu) while zooming (other browsers do it) but it does if you narrow down your browser window.

But this is the same with other pages not related to Fabrik or Helix.

 

[elmarra]

When I zoom in to 180% in my Firefox, I see that it sets it to:
1056x233
So the solution would be this:

@media (max-width: 1200px) {
  #sp-header .sp-megamenu-parent {
    display: none !important;
  }
 
  #sp-header #offcanvas-toggler.mega_offcanvas {
    display: flex !important;
  }
 
  #sp-header #offcanvas-toggler:not(.mega_offcanvas) {
    display: flex !important;
  }
 
  #sp-menu {
    justify-content: flex-end !important;
  }
}

So, hide the classic menu for those dimensions, and enable the hamburger menu.

 

[gstyles]

Thanks for your efforts troester, whatever you did has made a difference for me. In my earlier post I said "must be a helix issue." I meant maybe a helix issue.

 

[gstyles]

Thanks to elmarra for your efforts.

 

[elmarra]

Thanks to elmarra for your efforts.

After Troester changes is the problem solved for you?

 

[gstyles]

Seems to be fine this morning for me.