The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Page width issue on mobile devices

2 posters

Go down

In progress Page width issue on mobile devices

Post by troyeccles September 5th 2014, 2:28 pm

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..


Last edited by troyeccles on September 5th 2014, 2:56 pm; edited 2 times in total
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

In progress Re: Page width issue on mobile devices

Post by Ange Tuteur September 5th 2014, 3:14 pm

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 Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Page width issue on mobile devices

Post by troyeccles September 5th 2014, 3:24 pm

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??
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

In progress Re: Page width issue on mobile devices

Post by Ange Tuteur September 5th 2014, 3:36 pm

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

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% }
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Page width issue on mobile devices

Post by troyeccles September 5th 2014, 3:39 pm

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.
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum