This topic was marked solved by its starter, on January 17th, 12:53 AM
[CSS] Login looking bad on small screens

CerealGuy

  • Posts: 343
[CSS] Re: Login looking bad on small screens
« Reply #1,  »Last edited
Fixable without changing any html.
Code: (section.css) [Select]
@if guest
.login
margin: auto
dl
overflow: none
clear: right !important
dt, dd
margin: 0 0 .4em
width: 44% !important
padding: .1em
dt
float: left
clear: both !important
text-align: right
font-weight: 700
dd
width: 54% !important
float: right
text-align: left
padding-left: 0px !important
clear: none !important
p
text-align: center
input
max-width: 100%

@media (max-width: 450px)
.login
dt, dd
float, text-align: left
width: 100% !important

This stuff caused problems:
Code: (section.css) [Select]
// Even smaller? A smartphone, maybe..?
@media all and (max-width: 600px)
body #wedge // Precedence killjoy.
overflow: hidden

dt, dd
clear: both
width: 100%
dd
padding-left: 12px
On small screens (<= 600px) dt, dd got modified.
 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)


PR: https://github.com/Wedge/wedge/pull/48

Nao

  • Dadman with a boy
  • Posts: 16,013
[CSS] Re: Login looking bad on small screens
« Reply #2,  »
This looks sensible to me. I don't have time to test, but I'll try & merge it at the very least. ;)
[CSS] Re: Login looking bad on small screens
« Reply #3,  »
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...)

CerealGuy

  • Posts: 343

Nao

  • Dadman with a boy
  • Posts: 16,013

Drunken Clam

  • Drool, drool, drool....!
  • Posts: 149

CerealGuy

  • Posts: 343
[CSS] Re: Login looking bad on small screens
« Reply #7,  »
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.

Nao

  • Dadman with a boy
  • Posts: 16,013
[CSS] Re: Login looking bad on small screens
« Reply #8,  »
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.)

CerealGuy

  • Posts: 343
[CSS] Re: Login looking bad on small screens
« Reply #9,  »
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.







Nao

  • Dadman with a boy
  • Posts: 16,013
[CSS] Re: Login looking bad on small screens
« Reply #10,  »
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. ;)

CerealGuy

  • Posts: 343

Nao

  • Dadman with a boy
  • Posts: 16,013
[CSS] Re: Login looking bad on small screens
« Reply #12,  »
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...