Skip to main content ↑ ↓
Topic: Responsive CSS issues (Read 2757 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Responsive CSS issues

Just noticed a couple of things (looking at light variant only, at the moment).

1/ When going to 100% width on small screens, there's not really much point in rendering some of the big screen eye candy. Examples are the body background gradient, the gap between main wrapper and footer, and the border radius on the main wrapper. These are all things that only really make sense once the screen is large enough that you don't want the main wrapper set to 100% width.

It may be worth taking them out of the main section of the file, and adding them to the media queries section. Alternatively, override them for smaller screens. Not sure yet. Worth thinking about though.

2/ The linktree on a 480 is cramped and will probably be hard to use with fingers. Looks like it could use more spacing.

3/ Display.template.php buttons are over at the left, mixed up with the pages index, on a 480 screen.

4/ The "Send message" button is dropped on a 480, but there seems to be plenty of width for it and it was a popular feature when I introduced it at another site. I'm wondering if it wouldn't make more sense to have the username next to the avatar, with the "Send message" button over at the right. Having two links to profile split to opposite sides of the page doesn't really seem the best way.

5/ Moving up to 800 screen, the linktree still seems unnecessarily cramped and looks rather silly, even though it's now calling the same general styling as larger screens.  Given that this is probably intended for touchscreen, I'm not sure why the line-height was reduced here. It seems a bit plumbers crack about.

6/ If we really want to get into it, it'd make more sense for the linktree to have alternate styling on :active for touchscreen, rather than on hover. Hover makes sense with mouse, but not so much for fingers.

7/ Also on 800, the board descriptions are jumping over the left, underneath the board icons. This looks distinctly dodgey, as well as wasting screen height.

TBH it may be best to truncate board descriptions on an 800 screen. Beats me why people use long ones anyway. :P



Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Responsive CSS issues

Reply #1 –

3/ There is a float: none and a width: 100%, I seem to remember there was a reason why it was added, but TBH I don't remember that reason... Removing that part of the style doesn't seem to break anything.

About 4, simply avoiding the display: none (i.e. using any other display) it looks like the attachment.
What I'm not entirely sure about is the high number of buttons all around the interface, doesn't that make more difficult for people on small screens to accidentally "click" on one of them?
Bugs creator.
Features destroyer.
Template killer.

Re: Responsive CSS issues

Reply #2 –

A bit drastic, so not sure you like it... O:-)

It's just an idea, so I didn't spend much time making it look nice.
The main idea would be to remove the buttons from the page and convert them into a popup menu to reduce the amount of stuff around.

Apart from the tricky part due to the "more" button, the same could in theory be used for quickbuttons.

Potentially useful?
Completely wrong?
Dunno.

Re: Responsive CSS issues

Reply #3 –

I like that, which means it must be bad :P

It really seems appropriate for phone screens, thats typically what you find in mobile apps.  Not sure its needed for tablets though.

Re: Responsive CSS issues

Reply #4 –

I did it, you like it... okay scrap that c**p! :P
Bugs creator.
Features destroyer.
Template killer.

Re: Responsive CSS issues

Reply #5 –

It's over-styled, but seems functional for phones. Like Spuds said, not necessary (probably not desirable either) for tablets.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Responsive CSS issues

Reply #6 –

I was looking into 4, but I see that at ~400px the <ul> are alternating: odd ones (OP, 2nd reply, etc.) are narrow, while the even (1st,3rd, etc. replies) are wider.
I can't trace the source of this alternation... :'(

2 addressed here: https://github.com/emanuele45/Dialogo/commit/60521fe39866107a3dceadafbfc0e1cc0354b8c4
Bugs creator.
Features destroyer.
Template killer.