Page width issue on mobile devices

Hello.

My PHPBB3 page width has suddenly gone mad!

It's perfectly ok on a PC (windows or mac - various web browsers), but for some reason the main body is narrow on mobile devices (phones, iPads - both iOS and android). 

The header is ok but the main body is maybe 70% of what it used to be.

Screen width is (and always has been) set to 93% and that's fine.

So why the issue on a tablet/phone?

Link.... http://bellsareringing.forumotion.com

I need help! Members are going crazy at me.

Many thanks.

Troy.


Update: if I change the 93% to something higher (say, 100%) the iPad looks better (still some way off perfect) but on the PC it's over-sized.

I'm not sure what to do or why this has happened.

Is there a CSS code that I might use that will force the 93% on all platforms?




Update 2: I've set the width to 1200 (rather than a percentage) and this seems to have fixed the issue with all platforms.

However, will this affect people will lower-res screens?

I'm just concerned that not using 93% will cause some viewing problems for some people.

Sorry for the bumps: just instant updates.

I'd still DEARLY love help..

Hello troyeccles,

Using percentages fits the forum to the viewpoint of the user. So yes, if you use pixels members with smaller viewpoints will have to use the horizontal scrollbar.

For your first query : When using percents, there is a minimum width set in pixels, however, it could be that this property is not supported for their devices. To specfically target your users mobile devices you can use media queries.

Try adding this to your CSS for ipad users :

Code:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  #wrap { width:750px !important }
}

Ange, this SEEMS to have fixed it.

I went looking around and found another fix for a fixed width and I added yours too it. So my CSS now looks like this:

#wrap { width:97% !important; }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  #wrap { width:1024px !important }
}

I'm not entirely sure what any of that does but if it fixes the width at 97% (which looks fine) and sorts the mobile device issue out, I'll be happy.

For some reason the fonts got all screwed up too. They used to be fine on all platforms but now we're juggling around trying to find a best fit. If it's good on an iPad, it's to big for a PC. If it's perfect on the PC, it's too small for the iPad. 

Jeez! What caused this??

If you want to make changes that are specifically for the ipad add those rules within this media query.

Example :

Code:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  body { font-size:14px; }

  .exampleRule { /* this rule has no importance */ }

  #wrap { width:1024px !important }
}

Adding this to your stylesheet is pretty much like setting the width in the general config. Only the rule in the stylesheet overrides the AP config.

Code:

#wrap { width:97% }

Ok thank you!

For some reason setting the percentage in the AP config screwed everything up on mobile devices. Dunno why...it wasn't like that 2 hours ago.

Anyway, THANK YOU! Much appreciated.