#1351 - Misalignment of the profile block when viewed on phone or tablets
| Identifier | #1351 |
|---|---|
| Issue type | Feature request or suggestion |
| Title | Misalignment of the profile block when viewed on phone or tablets |
| Status | Completed |
| Handling member | Chris Graham |
| Addon | General / Uncategorised |
| Description | On the Composr main site the Profile block (account details/search) renders across the screen nicely.
On the Mk1 Golf Owners site this has always rendered in a split fashion with the block of queries appearing underneath and the bottom one half obscured. I have tried in the past to fix it but have failed :-( How many credits do I need to cough up to get Composr to sort it out ? Cheers Ade |
| Steps to reproduce | |
| Funded? | No |
The system will post a comment when this issue is modified (e.g., status changes). To be notified of this, click "Enable comment notifications".


Comments
(Click to enlarge)
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
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've removed these styles for new_logo_outer:
width: 100%;
height: 140px;
and added:
.new_logo_outer img {
max-width: 100%;
}
Still conducting tests...
{+START,IF,{$NOT,{$MOBILE}}}
.cns_member_column {
height: 8em;
}
{+END}
Which makes it auto-size the member bar better.
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
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.
<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.
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).
.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).
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!
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