making site mobile friendly for google

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
TheButcher2
Registered User
Posts: 344
Joined: Tue May 13, 2014 11:38 pm
Contact:

making site mobile friendly for google

Post by TheButcher2 » Tue Mar 06, 2018 7:09 pm

Okay so I'm using prosilver.
I get these 3 errors when checking if the site https://www.sponsor.chat is mobile friendly according to Google.
Fix the following 3 issues

Text too small to read

Viewport not set

Clickable elements too close together





What are the fixes please.

Thanks

aliasmatias
Registered User
Posts: 1
Joined: Tue Mar 06, 2018 9:08 pm
Name: Kaarlo Heikkinen

Re: making site mobile friendly for google

Post by aliasmatias » Tue Mar 06, 2018 9:19 pm

Set viewport in head section. Between <Head></head>
https://developer.mozilla.org/en-US/doc ... t_meta_tag

Make font larger. .css file
Have more space between clickable elements. .css file

mdkdio
Registered User
Posts: 16
Joined: Sun Jan 21, 2018 6:25 pm

Re: making site mobile friendly for google

Post by mdkdio » Tue Mar 06, 2018 10:58 pm

Hi TheButcher2!

First thing I noticed is that the style used is in /styles/custom
and not in /styles/prosilver

Could it be that you are using a custom style made by someone else and not by you?

Compare your site with this...
https://www.phpbb.com/customise/db/styl ... r/demo/3.2

TheButcher2
Registered User
Posts: 344
Joined: Tue May 13, 2014 11:38 pm
Contact:

Re: making site mobile friendly for google

Post by TheButcher2 » Wed Mar 07, 2018 1:46 pm

mdkdio wrote:
Tue Mar 06, 2018 10:58 pm
Hi TheButcher2!

First thing I noticed is that the style used is in /styles/custom
and not in /styles/prosilver

Could it be that you are using a custom style made by someone else and not by you?

Compare your site with this...
https://www.phpbb.com/customise/db/styl ... r/demo/3.2

It's prosilver which I called custom so when I update the script changes I made to the original prosilver do not over write my changes.

I have not messed with font sizes or spacing, if that helps.

Thanks

TheButcher2
Registered User
Posts: 344
Joined: Tue May 13, 2014 11:38 pm
Contact:

Re: making site mobile friendly for google

Post by TheButcher2 » Wed Mar 07, 2018 3:14 pm

aliasmatias wrote:
Tue Mar 06, 2018 9:19 pm
Set viewport in head section. Between <Head></head>
https://developer.mozilla.org/en-US/doc ... t_meta_tag

Make font larger. .css file
Have more space between clickable elements. .css file
Thanks for the info, so copy and paste this exact line in the Head?

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
How (where) do I modify the space please.

Thanks again

mdkdio
Registered User
Posts: 16
Joined: Sun Jan 21, 2018 6:25 pm

Re: making site mobile friendly for google

Post by mdkdio » Wed Mar 07, 2018 4:39 pm

TheButcher2 wrote:
Wed Mar 07, 2018 1:46 pm
mdkdio wrote:
Tue Mar 06, 2018 10:58 pm
Hi TheButcher2!

First thing I noticed is that the style used is in /styles/custom
and not in /styles/prosilver

Could it be that you are using a custom style made by someone else and not by you?

Compare your site with this...
https://www.phpbb.com/customise/db/styl ... r/demo/3.2

It's prosilver which I called custom so when I update the script changes I made to the original prosilver do not over write my changes.

I have not messed with font sizes or spacing, if that helps.

Thanks
Ok,was just making sure :)

mdkdio
Registered User
Posts: 16
Joined: Sun Jan 21, 2018 6:25 pm

Re: making site mobile friendly for google

Post by mdkdio » Wed Mar 07, 2018 4:42 pm

TheButcher2 wrote:
Wed Mar 07, 2018 3:14 pm
aliasmatias wrote:
Tue Mar 06, 2018 9:19 pm
Set viewport in head section. Between <Head></head>
https://developer.mozilla.org/en-US/doc ... t_meta_tag

Make font larger. .css file
Have more space between clickable elements. .css file
Thanks for the info, so copy and paste this exact line in the Head?

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
How (where) do I modify the space please.

Thanks again
You'll find where to modify in the file overall_header.html
(in your case) /styles/custom/template/overall_header.html (around line 6 which is where it was original prosilver style)

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1" />
/mdkdio

mdkdio
Registered User
Posts: 16
Joined: Sun Jan 21, 2018 6:25 pm

Re: making site mobile friendly for google

Post by mdkdio » Wed Mar 07, 2018 4:51 pm

TheButcher2 wrote:
Wed Mar 07, 2018 3:14 pm
aliasmatias wrote:
Tue Mar 06, 2018 9:19 pm
Set viewport in head section. Between <Head></head>
https://developer.mozilla.org/en-US/doc ... t_meta_tag

Make font larger. .css file
Have more space between clickable elements. .css file
Thanks for the info, so copy and paste this exact line in the Head?

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
How (where) do I modify the space please.

Thanks again
Depends on where it has been changed...

/styles/custom/theme/common.css
If you made changes to that file...
Line 3 html { font-size: 100%; }
Line 9 body { font-size: 10px; }
etc... Should get you on your way at least

Post Reply

Return to “[3.2.x] Styles Support & Discussion”

Who is online

Users browsing this forum: No registered users and 8 guests