SimplePortal

Support => English Support => Topic started by: andy on April 29, 2015, 12:50:34 PM

Title: Getting Simple Portal to pass Googles modile friendly test
Post by: andy 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.
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: Rupurudu! on April 29, 2015, 12:55:43 PM
On my forum (http://untamedheart.us/index.php), 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.
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: andy on April 29, 2015, 01:02:52 PM
Would be nice to drop both L/R columns to the bottom if possible.  (http://outdoorclubjapan.com/Smileys/clabicons/alabanzaa.gif)
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: andy 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.
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: Rupurudu! 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;
}
}
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: ♦ Ninja ZX-10RR ♦ 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 ;)
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: andy 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.
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: andy 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.

Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: empire 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;
}
}
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: andy 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.
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: empire 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.
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: velorooms 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
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: Rupurudu! 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.
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: andy 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!).

Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: Burke Knight 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.
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: ♦ Ninja ZX-10RR ♦ on May 26, 2015, 01:26:35 PM
Did you try the solution provided in msg#4 or the one in msg #1?
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: Burke Knight on May 26, 2015, 01:31:54 PM
The edit in msg #4 is what the screenshot I posted WAS.
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: ♦ Ninja ZX-10RR ♦ 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.
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: Ian M 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?
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: emanuele 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
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: ataru 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
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: coltp45 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.

(http://i.imgur.com/UBi53aJ.png)
Title: Re: Getting Simple Portal to pass Googles modile friendly test
Post by: ramon.cutanda on April 15, 2019, 02:49:25 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.

I am wondering... anybody finally found out how to control the order of the columns/blocks?

In my case I have unsuccessfully tried to show the main and center blocks first, then the left column at the bottom (I am not using the right column)

I guess that would be something like:

#sp_main #sp_center #sp_left

I have tried many different combinations, but none of them work :-(

Thanks!
SimplePortal 2.3.7 © 2008-2021, SimplePortal