I understand you're familiar with html and css, I'm not trying to challenge you in that regard. All I ask you please not make the mistake of thinking a few lines of css or xencode are going to help me here.
If it was that simple I would have solved the problem already.
Xen is a bit more convoluted in it's approach to presenting themes. It's the biggest reason adjusting to a dark theme takes so long because Xen doesn't provide enough alternatives when it comes to core styling.
Oftentimes one styling element controls many differing elements used sitewide. As an example, this is the main reason Alerts look the way they do. Xen combined a background element with a text element and somehow magically expects the site to differentiate.
Don't even get me started on the potential issues with z-index.
This is not a problem if you use a light theme as that's what Xen is designed around.
This is the reason I explained to you why the Blog would have to wait because the Forum is where the styling challenges lie.
On the Blog I have a Theme Engine allowing me full control over every element I display. I can choose to lock everything, make them all fluid or create a combination of the two.
In Xen I only have 3 Resolution Scaling Options, narrow, medium and wide, each assigned static (yes static) pixel width values. I make my best guess initially on what these resolutions will be and then tweak based off feedback such as yours.
The challenge then becomes that even if I manage to make the site scale and nest properly for your device it does not mean it won't render screwy on a
host of other possible resolutions.
In this regard, simple tweaking isn't enough when certain elements are fluid while other remained locked and there's simply nothing I can do about that.
...but let's assume for a moment I can because it may be possible if I start editing core Xen code at the Template Level.
Well, this process is extremely time consuming and unfortunately rarely carries over between Forum Software versions when templates are part of the upgrade process.
As an example, all the work put into the previous Themes is completely useless in this version of Xen given numerous changes to the template system.
The only thing I can do is remove some static elements in an attempt to force full fluidity. This too carries with it challenges as some elements are easy to remove with some display: none; code in an extra.css while others require direct manipulation of said stylesheet (at best) and/or commenting or altering code via direct template edits.
Not ideal.
Harking back to my previous work, those templates looked like spaghetti.
Your one picture clearly shows the Notices doing that weird vertical scaling which I didn't even know was possible. This is an element that is coded fluid by design so how I fix that remains a mystery?
The picture of the Discussion with Sidebar appears to be the work of a fluid discussion area (to a certain point) and a locked pixel Sidebar. This likely points to the only solution being display the forum as XenForo intended by removing the Sidebar everywhere except Forum Index for mobile.
The other picture I have no idea what I'm actually looking at?