The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Page width issue on mobile devices

View previous topic View next topic Go down

In progress Page width issue on mobile devices

Post by troyeccles on 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

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

In progress Re: Page width issue on mobile devices

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Page width issue on mobile devices

Post by troyeccles on 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??

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

In progress Re: Page width issue on mobile devices

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Page width issue on mobile devices

Post by troyeccles on 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.

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

View previous topic View next topic Back to top


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