browser layout problems.

I wonder what about the layout of this forum - I do not use it because on none of my devices I can really read the content. With the normal resolution and font I get a very thin long strip on the right (Forum normal), I can zoom down 30% to see more or resize the font, but in either case I need a magnifying glass in order to read it. I have not experienced a similar issue anywhere else.

Any explanation or suggestion how to get the layout right for reading?
 

Attachments

  • Screenshot_Forum_normal.png
    Screenshot_Forum_normal.png
    96.1 KB · Views: 167
  • Screenshot_Forum_smallfont.png
    Screenshot_Forum_smallfont.png
    342.3 KB · Views: 164
  • Screenshot_Forum_zoomdown.png
    Screenshot_Forum_zoomdown.png
    138.8 KB · Views: 157
You did not provide any information about your system: OS name/version, web browser name/version, installed plugins/extensions on the web browser, etc.
When did that happen? Always? Do you have same problem with other websites too? AFAIK, at the moment the Forums works fine in Firefox and Chromium.
Thus I have to guess, and here's the best guess: you have installed some exotic plugins/extensions across your different web browsers, which screws the web!
 
The center image is correct. You have selected the dark style from the lower left corner of this page. Go there and select the default style to begin with.

The other two images don't make sense. You've done something to your browser. Firefox in this case. Possibly fiddled with developer tools?
 
My apologies for lack of details - I use Firefox (current 84) exclusively, mostly on Solaris OS or FreeBSD which usually provide Linux as user agent. I have not experienced this issue anywhere else, not on XenForo community forum which is presumably the same. I experience it always on this forum, neither the default style nor anything else change the layout.

The issue is even in a new Firefox session without any add-ons or changes except minimum font set to 16.
 

Attachments

  • Screenshot_Forum_new.png
    Screenshot_Forum_new.png
    117.6 KB · Views: 129
minimum font set to 16.
This is the key! This is the issue and it just might be the forum software and some hidden text.

EDIT:
And the problem arises from this element:
<div id="freebsd_headercontainer">

As a wild guess, I'm assuming there is some text that is smaller than 16px which is now larger and causes that element to be shifted into place and causing this issue.

EDIT2:
The issue also occurs in a slightly different manner in chromium, too, but at a higher setting.

EDIT3:
And, more specifically, the hamburger button is set to display:none; when this is removed from the CSS, the issue goes away.
<button id="btn-hamburger"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
 
You are right!
Thank you for finding the issue - what can be done about it?

BTW I change my user agent in order to gain a bit more anonymity, often I would use the default from TOR browser.
 
btn-hamburger shows up in js/freebsd/freebsd-forums-mobile-layout-fixer.min.js (at the top). What to do with it?

Code:
(function(a){var c={isSubmenuOpen:!1,css:function(){a("head").append('<style>div#freebsd_menu ul.first,div#freebsd_menu ul:first-of-type {border-left: 0 !important;padding-left: 0;}div#freebsd_menu span.closingButton {display: none;}button#btn-hamburger {display: none;}div.frontdonateroundbox.donate-left {display: none;}@media screen and (max-width: 919px) {div.frontdonateroundbox {display: none;}html.menu-open {overflow-y: hidden !important}body {background-image: none;}div#freebsd_headercontainer {width: auto;font-size: 0px;letter-spacing: 0px;word-spacing: 0px;text-align: center;padding-bottom: 0;margin-bottom: 40px;}div#freebsd_menu {width: auto;margin: 0 !important;float: none;display: inline-block;font-size: 12px;box-sizing: border-box;padding-top: 5px;text-align: left;}div#freebsd_headercontainer {height: 77px;background-image: url("styles/freebsd/xenforo/freebsd_hdr_fill.png");}div#freebsd_headerlogoleft {margin: 0 auto;text-align: left;overflow: hidden;}div#freebsd_headerlogoleft img {width: auto;height: 75px;}div#freebsd_menu {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin: 0;padding: 61px 0 0px;text-align: center;z-index: 5000;background: #e5e5e5;overflow-y: auto;}div#freebsd_menu ul {border: none;display: inline-block;width: 100%;height: auto;overflow: auto;padding: 0 0 20px 0;cursor: pointer;}div#freebsd_menu ul ul {display: none !important;}html.submenu-open div#freebsd_menu ul ul {display: block !important;}div#freebsd_menu ul {display: inline-block;overflow: auto;}div#freebsd_menu ul ul {position: static;}div#freebsd_menu ul ul {margin-top: 20px;border-top: 1px solid #B4B4B4;padding: 20px 0 0;}div#freebsd_menu ul ul li {border-top: none;padding: 0 0 20px 0;}div#freebsd_menu span.closingButton {display: block;position: absolute;top: 20px;right: 20px;cursor: pointer;}button#btn-hamburger {box-sizing: border-box;display: block;position: absolute;top: 0;right: 0;height: 75px;width: 75px;padding: 17px 22px 18px 23px;cursor: pointer;margin: 0;border: 0;background: transparent;outline: 0 !important;}button#btn-hamburger span.icon-bar {display: block;box-sizing: border-box;border-radius: 2px;background-color: #eee;width: 30px;height: 4px;margin: 6px 0;}button#btn-hamburger:hover span.icon-bar {background-color: #fff;}div.frontdonateroundbox.donate-left {display: block;margin: -10px 0 0 20px;float: left;}div#loginBar h3#loginBarHandle {bottom: -14px;}}@media screen and (max-width: 559px) {div#freebsd_headerlogoleft img {height: 59px;}div#freebsd_headercontainer {height: 61px;background-image: url("styles/freebsd/xenforo/freebsd_hdr_fill.png");background-position: 0 -16px;}button#btn-hamburger {height: 59px;width: 59px;padding: 11px 15px 10px 14px;}}@media screen and (max-width: 429px) {div#freebsd_headerlogoleft {width: 212px;}}@media screen and (max-width: 359px) {div#loginBar h3#loginBarHandle {margin: 0 0 0 10px;}div.frontdonateroundbox.donate-left {margin: -10px 0 0 10px;}}@media screen and (max-width: 329px) {div.frontdonateroundbox.donate-left {float: none;margin: -10px 0 10px 10px;}div#loginBar h3#loginBarHandle {bottom: -40px;}}</style>')},
addMenuButtons:function(){var d=this,b=a("div#freebsd_menu");$container=a("div#freebsd_headercontainer");b.prepend('<span class="closingButton"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="21px" height="21px" viewBox="-1 -1 23 23" style="enable-background:new 0 0 21 21;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:#666666;stroke-width:2;stroke-miterlimit:10;}</style><defs></defs><g><line class="st0" x1="0.7" y1="0.7" x2="20.3" y2="20.3"></line><line class="st0" x1="0.7" y1="20.3" x2="20.3" y2="0.7"></line></g></svg></span>');
$container.append('<button id="btn-hamburger"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>');var c=a("div#freebsd_menu span.closingButton"),e=a("button#btn-hamburger");c.click(function(){b.hide(200);document.body.style.overflow="auto";a("html").removeClass("menu-open")});e.click(function(){b.show(200);a("html").addClass("menu-open");document.body.style.overflow="hidden"});a("div#freebsd_menu > ul a").click(function(a){920>d.getViewportWidth()&&
!d.isSubmenuOpen&&a.preventDefault()});a("div#freebsd_menu > ul").click(function(b){920>d.getViewportWidth()&&(a("div#freebsd_menu > ul").not(this).hide(200),a(this).find("ul").hide(0),a(this).find("ul").show(200),d.isSubmenuOpen=!0,a("html").addClass("submenu-open"))})},cloneDonateButtonToSidebar:function(d){var b=a("div#freebsd_headerlogoright"),c=b.find("div.frontdonateroundbox");a("div#loginBar div.pageContent").prepend(c.clone().addClass("donate-left"));d&&b.remove()},getViewportWidth:function(){var a=
window,b="inner";"innerWidth"in window||(b="client",a=document.documentElement||document.body);return a[b+"Width"]}};a(function(){c.cloneDonateButtonToSidebar(!1);c.addMenuButtons();c.css()})})(jQuery);

Oh, there's a second one in js/freebsd/freebsd-forums-mobile-layout-fixer-xf2.min.js. Not sure what the status of either is.

Code:
!function(e){var n={isSubmenuOpen:!1,css:function(){e("head").append('<style>.p-nav-smallLogo {display: none !important;}div#freebsd_menu ul.first,div#freebsd_menu ul:first-of-type {border-left: 0 !important;padding-left: 0;}div#freebsd_menu span.closingButton {display: none;}button#btn-hamburger {display: none;}div.frontdonateroundbox.donate-left {display: none;}@media screen and (max-width: 919px) {div.frontdonateroundbox {display: none;}html.menu-open {overflow-y: hidden !important}body {background-image: none;}div#freebsd_headercontainer {width: auto;font-size: 0px;letter-spacing: 0px;word-spacing: 0px;text-align: center;padding-bottom: 0;margin-bottom: 0px;background-color: black;border-bottom: 0px;}div#freebsd_menu {width: auto;margin: 0 !important;float: none;display: inline-block;font-size: 12px;box-sizing: border-box;padding-top: 5px;text-align: left;}div#freebsd_headercontainer {height: 77px;background-image: url("styles/freebsd/xenforo/freebsd_hdr_fill.png");}div#freebsd_headerlogoleft {margin: 0 auto;text-align: left;overflow: hidden;}div#freebsd_headerlogoleft img {width: auto;height: 75px;}div#freebsd_menu {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin: 0;padding: 61px 0 0px;text-align: center;z-index: 5000;background: #e5e5e5;overflow-y: auto;}div#freebsd_menu ul {border: none;display: inline-block;width: 100%;height: auto;overflow: auto;padding: 0 0 20px 0;cursor: pointer;}div#freebsd_menu ul ul {display: none !important;}html.submenu-open div#freebsd_menu ul ul {display: block !important;}div#freebsd_menu ul {display: inline-block;overflow: auto;}div#freebsd_menu ul ul {position: static;}div#freebsd_menu ul ul {margin-top: 20px;border-top: 1px solid #B4B4B4;padding: 20px 0 0;}div#freebsd_menu ul ul li {border-top: none;padding: 0 0 20px 0;}div#freebsd_menu span.closingButton {display: block;position: absolute;top: 20px;right: 20px;cursor: pointer;}button#btn-hamburger {box-sizing: border-box;display: block;position: absolute;top: 0;right: 0;height: 75px;width: 75px;padding: 17px 22px 18px 23px;cursor: pointer;margin: 0;border: 0;background: transparent;outline: 0 !important;}button#btn-hamburger span.icon-bar {display: block;box-sizing: border-box;border-radius: 2px;background-color: #eee;width: 30px;height: 4px;margin: 6px 0;}button#btn-hamburger:hover span.icon-bar {background-color: #fff;}div.frontdonateroundbox.donate-left {display: block;margin: -10px 4px 8px 20px;float: left;font-size: 11px;}}@media screen and (max-width: 410px) {div.frontdonateroundbox.donate-left {line-height: 13px !important;vertical-align: middle;margin-top: 6px;}}@media screen and (max-width: 559px) {div#freebsd_headerlogoleft img {height: 59px;}div#freebsd_headercontainer {height: 61px;background-image: url("styles/freebsd/xenforo/freebsd_hdr_fill.png");background-position: 0 -16px;}button#btn-hamburger {height: 59px;width: 59px;padding: 11px 15px 10px 14px;}}@media screen and (max-width: 429px) {div#freebsd_headerlogoleft {width: 212px;overflow: hidden;}div#freebsd_headerlogoleft img {max-width: 457px;}}@media screen and (max-width: 359px) {div.frontdonateroundbox.donate-left {margin: -10px 0 0 10px;}}@media screen and (max-width: 329px) {div.frontdonateroundbox.donate-left {float: none;margin: -10px 0 10px 10px;}}@media screen and (min-width: 651px) and (max-width: 919px) {div.frontdonateroundbox.donate-left {margin-bottom: 4px;}}</style>')},addMenuButtons:function(){var n=this,o=e("div#freebsd_menu");$container=e("div#freebsd_headercontainer"),o.prepend('<span class="closingButton"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="21px" height="21px" viewBox="-1 -1 23 23" style="enable-background:new 0 0 21 21;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:#666666;stroke-width:2;stroke-miterlimit:10;}</style><defs></defs><g><line class="st0" x1="0.7" y1="0.7" x2="20.3" y2="20.3"></line><line class="st0" x1="0.7" y1="20.3" x2="20.3" y2="0.7"></line></g></svg></span>'),$container.append('<button id="btn-hamburger"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>');var t=e("div#freebsd_menu span.closingButton"),i=e("button#btn-hamburger");t.click(function(){o.hide(200),document.body.style.overflow="auto",e("html").removeClass("menu-open")}),i.click(function(){o.show(200),e("html").addClass("menu-open"),document.body.style.overflow="hidden"}),e("div#freebsd_menu > ul a").click(function(e){n.getViewportWidth()<920&&!n.isSubmenuOpen&&e.preventDefault()}),e("div#freebsd_menu > ul").click(function(o){n.getViewportWidth()<920&&(e("div#freebsd_menu > ul").not(this).hide(200),e(this).find("ul").hide(0),e(this).find("ul").show(200),n.isSubmenuOpen=!0,e("html").addClass("submenu-open"))})},cloneDonateButtonToSidebar:function(n){var o=e("div#freebsd_headerlogoright"),t=o.find("div.frontdonateroundbox");e("div.p-nav-inner").append(t.clone().addClass("donate-left")),n&&o.remove()},getViewportWidth:function(){var e=window,n="inner";return"innerWidth"in window||(n="client",e=document.documentElement||document.body),e[n+"Width"]}};e(function(){n.cloneDonateButtonToSidebar(!1),n.addMenuButtons(),n.css()})}(jQuery);
 
The banner at the top was recently fixed but may need some fixing again. It looks like the various links to the handbook and other documentation have moved. I get a 404 on pretty much every one of them.
 
Just to provide update - the issue is with the freebsd_headercontainer which is different for forums and all the other website. On the forum website is narrow and does not change with the window which impacts on the forum layout. The head container on all other places is different and works fine.

I have attached a screenshots how the forum looks like with the headcontainer, without, and FreeBSD main page for comparison.

I hope this may help to identify the issue.
 

Attachments

  • Screenshot_2021-04-10 The FreeBSD Forums.png
    800.2 KB · Views: 89
  • Screenshot_2021-04-10 The FreeBSD Forums-NoHeadercontainer.png
    Screenshot_2021-04-10 The FreeBSD Forums-NoHeadercontainer.png
    747.2 KB · Views: 96
  • Screenshot_2021-04-10 The FreeBSD Project.png
    Screenshot_2021-04-10 The FreeBSD Project.png
    301 KB · Views: 96
When you have old eyes or screen with higher resolution, I tend to set minimum font size to about 18 in Firefox. Yes that results the "sidebar" look. So I wound up setting min font size back to 15, but then use firefox ctrl-+ to magnify. That winds up giving readable text and preserves the layout of the website.
Yes, it's a bit of a pain, but not too bad.
 
Back
Top