#1351 - Misalignment of the profile block when viewed on phone or tablets

This is a spacer post for a website comment topic. The content this topic relates to: #1351 - Misalignment of the profile block when viewed on phone or tablets
Could you make a "does now" screenshot and "what is desired" mockup please? I think you mean the main_member_bar block, and by queries you mean the virtual forum link, but it seems to me it is correctly trying to linearise stuff for the purpose of fitting on small widths. I'm surprised about tablets though, as they don't use the mobile theme.
Image

(Click to enlarge)

I have uploaded the "does now"

The mobile theme is fine.

Most people do not use the mobile theme on tablets and a few on phones, prefer the zoom in way of working.

I would like the list of queries on the right as per your site and not cut off.

Cheers
Ade
Got it. So essentially, there's a width problem on iPad's. Is this an iPad 1?
It's an iPad 3, retina screen.
Interestingly on an iphone 5 it wraps the same and cuts the last query in half.
On an iPhone 4S it renders across the screen properly but still cuts the last query in half and the middle section loses the xxx new posts line.

I have also had reports from some users that they get the same behaviour on their laptop - but I do not have any evidence of this.

Cheers
Ade
I'm taking a look at this. Bear with me while I fiddle around...
I've set the ipad to use device-width (the correct thing to do for non-fixed-width).

I've removed these styles for new_logo_outer:
width: 100%;
height: 140px;

and added:
.new_logo_outer img {
max-width: 100%;
}

Still conducting tests...
I have removed...

{+START,IF,{$NOT,{$MOBILE}}}
.cns_member_column {
height: 8em;
}
{+END}


Which makes it auto-size the member bar better.
Hi Chris,

On the iPad that has made the query visible, but the list of queries still wrap.

On the iphone it has had a very weird effect, the whole front page is not displayed and you cannot zoom it in

Cheers
Ade
Note that iPad retina has nominal width of 768, because it essentially double writes pixels. The intent is to kind of fix classical pixel resolution so that it becomes more like a real-world size, then to provide kind of sub-pixel resolution enhancement going forward. It's a bit confusing.

To this end, your:
.cns_forum_grouping_column5 {
width: 27em;
}
change totally killed iPad rendering ;).

I am adding some responsive design in to encode your higher width only on higher widths.
Ok so on the iPad you have a choice. I have respected your request to have the member bar not wrap, via this in HTML_HEAD:
<meta name="viewport" content="width=1200, user-scalable=yes" />

That essentially undoes what I just said, telling it to make the width of the website 1200 pixels across and to fit that against the screen. This is only going to be good on a 'retina' tablet (or a huge one...).

Or, you can have this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

Which would make it 768 across, which is what the non-retina iPad supports, and what retina devices will purport as the width but with added subpixel rendering.
You would then have wrapping.
"I have also had reports from some users that they get the same behaviour on their laptop - but I do not have any evidence of this."

They probably either have a very low resolution, or they've turned their text size/zoom up (which commonly people do and not even realise it).
I mentioned I did some responsive design for you. In cns.css, this is it:
.cns_forum_grouping_column5 {
width: 17em;
}
@media screen and (min-width: 1100px)
{
.cns_forum_grouping_column5 {
width: 27em;
}
}

You can see I gave it the bigger final column width only on higher widths.

The alternative would be to either undo what you did (put it back always to 17em) or to remove size specification [=auto size the table] (which looks a bit ugly, as we want to specify the widths of some of those columns).
The front page and forum look good to me on iPhone, so I think I'm done.

Done all this as a favour (up to this point anyway ;-) ). Tuning for tablets has been an ongoing exercise, as I say, the new subpixel rendering method of retina screens, and the way you specify what width to map against the device, is all a a bit weird and I've been going through a learning process myself!
Hi Chris,

I am very happy how it is now.
Thanks for explaining the changes and the reasons for them.
(Retina screens are the way forward !!!)

Cheers
Ade
Thanks for the favour Chris - appreciate that a lot !!
0 guests and 0 members have recently viewed this.