XenForo: FreeBSD style on mobile device incorrect size and view

VladiBG

VladiBG

After the last XenForo upgrade the FreeBSD Style is broken when viewed on mobile. The size of the top id="freebsd_headercontainer" is not properly resized to the screen size of the mobile device.

If you switch to the "BlueFreeBSD" size it is correct.

Also attaching files to the thread is broken. When you try to insert picture to the post you receive the following error:
The upload failed because the temporary directory was missing. The site administrator will need to resolve this before any files can be uploaded.
Click to expand...
 
I don't know if you accept this but my suggestion is to hide the entire freebsd_headercontainer on devices with display smaller than 800px or use two separate logo images for desktop and mobile

To hide the container using css it will look like this:

@media screen and (max-width: 800px) {
#freebsd_headercontainer {
visibility: hidden;
display: none;
}
}
Click to expand...

This will also fix the anchor of the XenForo menu so it will stick to the top and it will look like this:

Screenshot 2024-10-29 233124.png


Currently it look like this and if you scroll down the top menu bar is not visible.
Screenshot 2024-10-29 233027.png
 
VladiBG said:
I don't know if you accept this but my suggestion is to hide the entire freebsd_headercontainer on devices with display smaller than 800px or use two separate logo images for desktop and mobile

To hide the container using css it will look like this:



This will also fix the anchor of the XenForo menu so it will stick to the top and it will look like this:

View attachment 20845

Currently it look like this and if you scroll down the top menu bar is not visible.
View attachment 20846
Click to expand...

I have implemented this for now, thanks for the suggestion.
 
It's working now on my phone. If you still want to have the menu bar + logo for mobile phones i can suggest another approach with <picture> element but you will need a smaller logo and it works only on modern browsers. It look like this:

<picture>
<source media="(max-width: 799px)" srcset="/styles/freebsd/xenforo/freebsd_logo-small.png" />
<source media="(min-width: 800px)" srcset="/styles/freebsd/xenforo/freebsd_logo.png" />
<img src="/styles/freebsd/xenforo/freebsd_logo.png" alt="FreeBSD" />
</picture>

Where
freebsd_logo.png will be shown on display larger than 800px as shown in the current version
freebsd_logo-small.png will be for mobile (for example only logo without the slogan) it need to fit the mobile phone or devices with small screen.
<img> is fallback for old browsers with the same big freebsd_logo.png 457x75

More detailed explanation can be found here:

Using responsive images in HTML - HTML | MDN

In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across different devices.
developer.mozilla.org developer.mozilla.org

There must be also some rework for the horizontal menu bar as it won't fit or scale.
 
Yeah, the whole header bar on mobile is for a future endeavor, your suggestions are appreciated.
 
I'm happy how it look like currently. Also noticed that there's some new push notification feature on the mobile phone as the web site now ask permissions to allow notifications. Also there's new webapp.
 
VladiBG said:
I'm happy how it look like currently. Also noticed that there's some new push notification feature on the mobile phone as the web site now ask permissions to allow notifications. Also there's new webapp.
Click to expand...
Yes, I switched on PWA yesterday.
 
You must log in or register to reply here.
Back
Top