collapse collapse

* User Info

 
 
Welcome, Guest. Please login or register.
Did you miss your activation email?

* Who's Online

  • Dot Guests: 104
  • Dot Hidden: 0
  • Dot Users: 0

There aren't any users online.

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • ♦ Ninja ZX-10RR ♦: <3 aegersz
    September 13, 2018, 03:36:09 PM
  • aegersz: I STILL <3 LOVE SimplePortal
    September 13, 2018, 07:11:39 AM
  • aegersz: o LOVE you guys - Simple Portal rocks !
    May 09, 2018, 05:18:59 AM
  • Chen Zhen: our apologies for the site being down.. please read server issues topic
    March 22, 2018, 05:32:38 AM
  • {OCS}MasterSeal: LOL PLEASE forget I just posted that. I found the answer in my own dang post back in 2015. lol sorry!
    July 04, 2017, 10:47:55 PM
  • {OCS}MasterSeal: I know this SB isnt' for support, but I just have a general question. Who would I contact to find out where SP stores its block info? Is it DB driven or files? I searched the site but came up with nothing. probably my fault any insight is appreciated.
    July 04, 2017, 10:43:36 PM
  • ♦ Ninja ZX-10RR ♦: Excuse me but what does Simpleportal have to deal with that?
    February 05, 2017, 08:21:14 PM
  • WhiteEagle: of course IMHO that site appears to be dead :(
    February 04, 2017, 01:08:05 PM
  • WhiteEagle: If I can get that, then I'll use it for that site...
    February 04, 2017, 01:07:35 PM
  • WhiteEagle: decided to not use SMF for any projects, unless I can get a copy of the premium version of the fanfiction archive plugin
    February 04, 2017, 01:06:54 PM
  • expertdecisions: cloudflare
    January 28, 2017, 08:01:47 AM
  • aegersz: SM release 2.0.13 !
    January 12, 2017, 06:00:13 AM
  • raffo: Tks Emanuele, even if I didn't understand the fix :D
    November 07, 2016, 02:01:20 AM
  • emanuele: [link]
    November 01, 2016, 12:43:50 PM
  • emanuele: raffo: the English support board is a good place. ;)
    November 01, 2016, 12:43:38 PM
  • raffo: Where can I find the fix for the shoutbox?
    November 01, 2016, 05:06:09 AM
  • {OCS}MasterSeal: To the SP team, I make a point to come here and thank you as much as possible for your work.  so again, THANK YOU!
    October 28, 2016, 10:38:05 AM
  • emanuele: That's indeed funny, the limit is present only in the patch and not the full install.
    October 22, 2016, 06:14:58 PM
  • phantomm: and from what I see only patch is broken, full install package is fine
    October 21, 2016, 03:44:44 PM
  • phantomm: they say it for over 3 weeks now..
    October 21, 2016, 03:43:52 PM
Blocks speak! Do you have an interest in getting more blocks - or even making your own? The Blocks Board is for you!

Author Topic: Getting Simple Portal to pass Googles modile friendly test  (Read 49937 times)

0 Members and 1 Guest are viewing this topic.

Offline andy

  • On Leave
  • *
  • Posts: 861
  • Gender: Male
    • Outdoor Club Japan (OCJ) アウトドア・クラブ・ジャパン
  • SMF Version: 2.0.15
  • SP Version: 2.3.7
  • Elkarte Version: None
Getting Simple Portal to pass Googles modile friendly test
« on: April 29, 2015, 12:50:34 PM »
Someone over on SMF suggested changing the width in the portal.css from

min-width: 750px;

Change to:

min-width: device-width;

THIS IS NOT A GOOD ANSWER - AS STATED BELOW

If using blocks right and left this will shrink the center blocks to nothing.... not much use if all your important info is on the front page in a block that cant be seen.

Without changing the default width Simple Portal fails the Google mobile friendly test.
I tried changing this a bit and found a value of 650px would show the center block enough and pass the  mobile friendly test.

It would be worth making a Mod for Simple Portal to drop the side columns to the bottom  or  let them collapse. Problem with collapsing side columns is having advertising blocks.

At least, setting the min-width to 650px should pass the test and leave the center block readable  - if side columns are not too wide. My columns are 230 wide and its ok.
« Last Edit: April 30, 2015, 07:30:49 AM by andy »
Everyone is a volunteer here so please try and make a small donation to keep the Simple Portal website running


Offline Rupurudu!

  • Semi Newbie
  • *
  • Posts: 24
  • Gender: Male
  • Klonoa is the best!
    • Untamed Heart Klonoa Collective
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #1 on: April 29, 2015, 12:55:43 PM »
On my forum, I removed min-width: 750px; and dropping right column to the bottom. It's not really hard. I can post a mod or howto topic if you want.

Offline andy

  • On Leave
  • *
  • Posts: 861
  • Gender: Male
    • Outdoor Club Japan (OCJ) アウトドア・クラブ・ジャパン
  • SMF Version: 2.0.15
  • SP Version: 2.3.7
  • Elkarte Version: None
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #2 on: April 29, 2015, 01:02:52 PM »
Would be nice to drop both L/R columns to the bottom if possible. 
Everyone is a volunteer here so please try and make a small donation to keep the Simple Portal website running


Offline andy

  • On Leave
  • *
  • Posts: 861
  • Gender: Male
    • Outdoor Club Japan (OCJ) アウトドア・クラブ・ジャパン
  • SMF Version: 2.0.15
  • SP Version: 2.3.7
  • Elkarte Version: None
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #3 on: April 29, 2015, 01:06:53 PM »
I left a message in the SP team board about this  a week ago. I guess the best thing would be to reduce the side blocks to some minimum setting and resize any images in them. Or have an option to move or collapse them.
Everyone is a volunteer here so please try and make a small donation to keep the Simple Portal website running


Offline Rupurudu!

  • Semi Newbie
  • *
  • Posts: 24
  • Gender: Male
  • Klonoa is the best!
    • Untamed Heart Klonoa Collective
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #4 on: April 29, 2015, 03:34:52 PM »
Well, my code drops right column to bottom and left column to the top. But I'm not using the left column, so this was not a problem for me.

/Themes/default/css/portal.css

Find:
Code: [Select]
body
{
min-width: 750px;
}
Replace with:
Code: [Select]
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {

#sp_main #sp_left, #sp_main #sp_center, #sp_main #sp_right {
display: block;
width: auto !important;
padding: 0;
}
}
« Last Edit: April 30, 2015, 01:03:06 PM by Rupurudu! »

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1173
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #5 on: April 29, 2015, 03:41:41 PM »
Without changing the default width Simple Portal fails the Google mobile friendly test.
I tired changing this a bit and found a value of 650px would show the center block enough and pass the  mobile friendly test.
So much thank you for that, my site is not mobile friendly, and evading those google trash tests is my goal ;)
« Last Edit: April 29, 2015, 07:59:49 PM by ♦ Ninja ZX-10RR ♦ »
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis

Offline andy

  • On Leave
  • *
  • Posts: 861
  • Gender: Male
    • Outdoor Club Japan (OCJ) アウトドア・クラブ・ジャパン
  • SMF Version: 2.0.15
  • SP Version: 2.3.7
  • Elkarte Version: None
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #6 on: April 30, 2015, 02:01:08 AM »
That works well...

Quote
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {

   #sp_main #sp_left, #sp_main #sp_center, #sp_main #sp_right {
      display: block;
      width: auto !important;
      padding: 0;
   }
}

And I was just about to try and find advertisers to help pay site maintenance and costs. Would be more blocks. THey wouldnt like being in the right column probably.
Everyone is a volunteer here so please try and make a small donation to keep the Simple Portal website running


Offline andy

  • On Leave
  • *
  • Posts: 861
  • Gender: Male
    • Outdoor Club Japan (OCJ) アウトドア・クラブ・ジャパン
  • SMF Version: 2.0.15
  • SP Version: 2.3.7
  • Elkarte Version: None
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #7 on: April 30, 2015, 05:15:25 AM »
Getting different results with the mobile friendly test.

Sometimes fails and sometimes passes.  Anyway, it looks better with the code change and the last test it passed. Wondering it is loaded in the browser and affected by login or not. Results were not uniform.

Everyone is a volunteer here so please try and make a small donation to keep the Simple Portal website running


Offline empire

  • Semi Newbie
  • *
  • Posts: 11
  • Gender: Male
  • KickAss
    • Bayside Gamers
  • SMF Version: 2.0.10
  • SP Version: 2.3.6
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #8 on: April 30, 2015, 07:13:38 AM »
So what's the right code to add? I changed mine months back for mobile devices I just used

Code: [Select]
min-width: device-width; and when reviewing on phone I only see centre blocks. There are many other things that I want to say that's regarding this topic is the slideshow block on the forum, if you check my site you see the header and footer the width as same and the main boards with gallery slideshow block has a bigger different width.

And if you check out the portal on same sites it needs more spacing between the blocks where it has half of a half space where it needs about 2inch or so apart of the blocks

This is what I have not used that fix the padding
Code: [Select]
}
@media (max-width: 991px)
{
#admin_content .table > thead > tr > th:nth-child(2), #admin_content .table > tbody > tr > td:nth-child(2),
#admin_content .table > thead > tr > th:nth-child(4), #admin_content .table > tbody > tr > td:nth-child(4),
#admin_content .table > thead > tr > th:nth-child(5), #admin_content .table > tbody > tr > td:nth-child(5)
{
display: none;
}
#admin_content .table > thead > tr > th:last-child, #admin_content .table > tbody > tr > td:last-child
{
display: table-cell !important;
text-align: right !important;
}
}
#sp_center
{
     padding: 0 5px;
   
}
@media (max-width: 991px)
{
        #sp_left, #sp_right
{
        display: none;
}
}
« Last Edit: April 30, 2015, 07:18:20 AM by empire »

Offline andy

  • On Leave
  • *
  • Posts: 861
  • Gender: Male
    • Outdoor Club Japan (OCJ) アウトドア・クラブ・ジャパン
  • SMF Version: 2.0.15
  • SP Version: 2.3.7
  • Elkarte Version: None
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #9 on: April 30, 2015, 07:29:25 AM »
This works:

http://simpleportal.net/index.php?topic=13934.msg69009#msg69009


I cannot say about other minor stuff like padding or slideshow. I hope Simple Portal will update soon to something that is more mobile friendly. When I dont know but the code change does work for general case.
Everyone is a volunteer here so please try and make a small donation to keep the Simple Portal website running


Offline empire

  • Semi Newbie
  • *
  • Posts: 11
  • Gender: Male
  • KickAss
    • Bayside Gamers
  • SMF Version: 2.0.10
  • SP Version: 2.3.6
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #10 on: April 30, 2015, 07:49:33 AM »
Would be good to see the site width as same from top to bottom. As you can see here www.baysidegamers.com though the phone devices that the width is not the same thought-out the site, and that the galley slideshow may be causing the problem. My theme is already have responsive craved support (if I got the name currently lol) which is zgames theme.

Offline velorooms

  • Jr. Member
  • **
  • Posts: 83
    • Velorooms
  • SMF Version: 2.0.2
  • SP Version: 2.3.5
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #11 on: April 30, 2015, 12:47:24 PM »
Well, my code drops right column to bottom and left column to the top. But I'm not using the left column, so this was not a problem for me.

Find:
Code: [Select]
body
{
min-width: 750px;
}
Replace with:
Code: [Select]
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {

#sp_main #sp_left, #sp_main #sp_center, #sp_main #sp_right {
display: block;
width: auto !important;
padding: 0;
}
}

This works really well.

Well, it works but ive got so much to figure out because of my crazy styling and block sizes etc. But great tip.

the first problem im encountering is that my menu is quite large so is overlapping as soon as screen size reduces. I notice your switches from text to icon when it drops below a certain size.

how is that done?

edit: ok, thats a build in feature of bloc's themes. now i need to work out how bloc did it :D
« Last Edit: April 30, 2015, 12:52:38 PM by velorooms »
Admin and Owner of Velorooms.com - Using SMF 2.0.3 and Simpleportal 2.3.5

Offline Rupurudu!

  • Semi Newbie
  • *
  • Posts: 24
  • Gender: Male
  • Klonoa is the best!
    • Untamed Heart Klonoa Collective
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #12 on: April 30, 2015, 01:02:12 PM »
Well, my code drops right column to bottom and left column to the top. But I'm not using the left column, so this was not a problem for me.

Find:
Code: [Select]
body
{
min-width: 750px;
}
Replace with:
Code: [Select]
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {

#sp_main #sp_left, #sp_main #sp_center, #sp_main #sp_right {
display: block;
width: auto !important;
padding: 0;
}
}

This works really well.

Well, it works but ive got so much to figure out because of my crazy styling and block sizes etc. But great tip.

the first problem im encountering is that my menu is quite large so is overlapping as soon as screen size reduces. I notice your switches from text to icon when it drops below a certain size.

how is that done?

edit: ok, thats a build in feature of bloc's themes. now i need to work out how bloc did it :D
No, It isn't. I modified it to work. Otherwise it shows vertical scrollbars on the portal page, disabling the ability to resize the theme.

Also, this modification must be done in the /Themes/default/css/portal.css file and not from your theme's file.

Offline andy

  • On Leave
  • *
  • Posts: 861
  • Gender: Male
    • Outdoor Club Japan (OCJ) アウトドア・クラブ・ジャパン
  • SMF Version: 2.0.15
  • SP Version: 2.3.7
  • Elkarte Version: None
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #13 on: May 01, 2015, 08:34:18 AM »
I got variable results with the Google mobile friendly test at first - sometimes pass, sometimes fail.

It can depend on the server responding quick enough. After enabling gzip in SMF settings it passed the test almost every time (with the above code edits to move SP columns). I already have a mobile friendly theme (Redsy - very good!).

Everyone is a volunteer here so please try and make a small donation to keep the Simple Portal website running


Offline Burke Knight

  • Sr. Member
  • ****
  • Posts: 394
  • Gender: Male
  • I tell it how I see it. Don't like it? Hit Alt+F4
    • BurkeKnight Enterprises
  • SMF Version: None
  • SP Version: None
  • Elkarte Version: None
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #14 on: May 26, 2015, 01:04:39 PM »
I tried this, and it made all blocks way too wide for the screen.
When using on the phone, it stretched the left and right blocks way too much, instead of shrinking the blocks down to the phone's width.

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1173
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #15 on: May 26, 2015, 01:26:35 PM »
Did you try the solution provided in msg#4 or the one in msg #1?
« Last Edit: May 26, 2015, 01:29:50 PM by ♦ Ninja ZX-10RR ♦ »
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis

Offline Burke Knight

  • Sr. Member
  • ****
  • Posts: 394
  • Gender: Male
  • I tell it how I see it. Don't like it? Hit Alt+F4
    • BurkeKnight Enterprises
  • SMF Version: None
  • SP Version: None
  • Elkarte Version: None
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #16 on: May 26, 2015, 01:31:54 PM »
The edit in msg #4 is what the screenshot I posted WAS.

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1173
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #17 on: May 26, 2015, 01:46:21 PM »
Hmm, I'd have to see it, but I don't even know how to inspect with the phone ;D Could you attach the code entirely and post the URL? I might have a look at the selectors&classes affecting it, but no promises.
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis

Offline Ian M

  • Semi Newbie
  • *
  • Posts: 19
  • Gender: Male
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #18 on: October 31, 2016, 06:04:13 PM »
Well, my code drops right column to bottom and left column to the top. But I'm not using the left column, so this was not a problem for me.

/Themes/default/css/portal.css

Find:
Code: [Select]
body
{
min-width: 750px;
}
Replace with:
Code: [Select]
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {

#sp_main #sp_left, #sp_main #sp_center, #sp_main #sp_right {
display: block;
width: auto !important;
padding: 0;
}
}
Just stumbled on this code and it works really well. One question, is it possible to implement anything into this code where both the left and right blocks are placed at the bottom?

Offline emanuele

  • Developer
  • *
  • Posts: 293
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #19 on: October 31, 2016, 07:12:47 PM »
AFAIK there are some... tricks? But I'm not sure how compatible with certain browsers are.
The general idea is here:
http://stackoverflow.com/questions/220273/use-css-to-reorder-divs

Offline ataru

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
    • Biancocelesti.org - Sempre Forza Lazio
  • SMF Version: 2.0.10
  • SP Version: 2.3.6
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #20 on: November 03, 2016, 08:34:18 AM »
i duplicated blocks and hidden original to reorder them. had to ad da randomizer code for variables in php blocks, but it works fine:

www.biancocelesti.org/index.php?theme=4

Offline coltp45

  • Newbie
  • Posts: 2
  • SMF Version: 1.1.9
  • SP Version: 2.2.2
Re: Getting Simple Portal to pass Googles modile friendly test
« Reply #21 on: November 08, 2016, 07:55:56 PM »
i duplicated blocks and hidden original to reorder them. had to ad da randomizer code for variables in php blocks, but it works fine:

www.biancocelesti.org/index.php?theme=4
Can you explain better what you did? Please XD

Well, my code drops right column to bottom and left column to the top. But I'm not using the left column, so this was not a problem for me.

/Themes/default/css/portal.css

Find:
Code: [Select]
body
{
min-width: 750px;
}
Replace with:
Code: [Select]
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {

#sp_main #sp_left, #sp_main #sp_center, #sp_main #sp_right {
display: block;
width: auto !important;
padding: 0;
}
}

I do this change but now the shoutbox is impossible to use.