Public area => Bug reports => The Pub => Archived fixes => Topic started by: CerealGuy on December 19th, 2016, 06:33 PM
Idea is to do something like this, but would need CSS3.
https://jsfiddle.net/1dqm3rgt/ (zoom in/out to see the difference)
Fixable without changing any html.
clear: right !important
margin: 0 0 .4em
width: 44% !important
clear: both !important
width: 54% !important
padding-left: 0px !important
clear: none !important
@media (max-width: 450px)
float, text-align: left
width: 100% !important
This stuff caused problems:
On small screens (<= 600px) dt, dd got modified.
// Even smaller? A smartphone, maybe..?
@media all and (max-width: 600px)
body #wedge // Precedence killjoy.
Clear got set to both, width to 100%, padding-left: 12px got added to dd.
Nothing we want on .login dd or .login dt. Therefore added !important flags
that those rules don't get overwritten. Also i removed an overflow, those
added scrollbars look really bad and aren't needed. Everything's on screen.
And input rules for max-width :100% didn't get set for the password input.
Now setting it for all inputs.
Besides that, on very small screens (<= 450px) we now do line breaks
between dt and dd. Looks better.
Small Screen (screen width: 630px)
Very small screen (screen width: 353px)
This looks sensible to me. I don't have time to test, but I'll try & merge it at the very least. ;)
So... Looked a bit into this commit, and I have a few remarks.
- overflow: auto isn't about adding scrollbars, it's about clearfixing the item. It's a well-known advantage of that overflow type. As long as you don't actually have a div big enough to get scrollbars, it's all fine.
- I tried to revert the commit locally, and only keep the @media override at the end. It worked perfectly that way (i.e. I'm getting what you showed in your last screenshot.). Are you sure you didn't commit too much...? I understand that precedence might be a problem, but you could simply add body #wedge before the declaration, and the .login dt will then get better precedence. However I didn't even get problems myself...
I tried to change the media width to 600px instead of 450, and same results to me.
Interestingly, I also removed the overflow entirely, and didn't get any issues.
Can you look into this..? (e.g. just try wedge.org on your mobile phone and browser...)
Looks fine on my galaxy s3, will try later on other devices :cool:
Looks great on my Galaxy S6 and Galaxy Tab A :cool:
Looks fine on all my devices. The only thing to tweak is when it should change. 600px seems to be a bit high in my opinion, alread on 550px it looks ways better. But this is something we can always change.
I dunno, the 600px size was decided upon several years ago, and I don't remember exactly why I chose that threshold...
All I know is that the smartphone-specific code isn't there, it's in @media $responsive, that one is only for narrow windows (as well as smartphones of course.)
Now I remember, I set it to 450px because that was a good
point where it should get split into different lines. 600px is
in my opinion too high, between 450px and 600px it still
looks fine if it's in the same line. But that's just cosmetics.
All your other changes work as expected :cool:
Example: It's on 540px, definetly enough space to still have it
in one line.
Hmm yeah, feel free to commit a 450px revert if you feel it's for the best.
I just aimed for consistency. But this might matter more. ;)
Will do one but could take a while and it's not really high priority. Exams are :D
Should also modify the RSS feed list (in the sidebar) to use some normal stuff instead of these fucking dd/dt/dl tags. I'm really sick with them... display:table for the win? Heck you can even push columns to new rows through @media...