Main Menu
collapse

Simple Portal Archived Forum

This is an Archive Forum.

The content in this forum may be out-of-date or have been superseded by newer information, and links in forum pages to other sites may not work.
This forum contains archives for future reference.

Visit our thread at Simple Machines Forum for current support.

SMF 2.1 users: EhPortal is a ported version of Simple Portal specifically designed for the SMF 2.1 branch.
Please visit web-develop.ca to download EhPortal and for its support.

User Info

Welcome Guest.
Please log in.

Who's Online

  • Dot Guests: 802
  • Dot Hidden: 0
  • Dot Users: 0

There aren't any users online.

Recent Posts

Adding Forums Button to Nav bar by jirapon
[August 01, 2019, 09:07:12 AM]


Re: Board Icons by ♦ Ninja ZX-10RR ♦
[July 30, 2019, 04:03:41 PM]


MOVED: Czech translation???? by ♦ Ninja ZX-10RR ♦
[July 30, 2019, 03:04:51 PM]


Board Icons by jirapon
[July 30, 2019, 07:28:44 AM]


Re: Thankyou Simpleportal, by ♦ Ninja ZX-10RR ♦
[July 29, 2019, 09:41:29 AM]


Installation errors? Mod incompatibilities? Upgrade problems? Make your way over to the Install and Upgrade Support board for all your solutions!

Getting Simple Portal to pass Googles modile friendly test

Started by andy, April 29, 2015, 12:50:34 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

andy

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.
Everyone is a volunteer here so please try and make a small donation to keep the Simple Portal website running


Rupurudu!

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.

andy

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


andy

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


Rupurudu!

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:

body
{
min-width: 750px;
}

Replace with:

@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;
}
}


♦ Ninja ZX-10RR ♦

#5
Quote from: andy on April 29, 2015, 12:50:34 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 ;)
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

andy

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


andy

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


empire

So what's the right code to add? I changed mine months back for mobile devices I just used

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
}
@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;
}
}

andy

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


empire

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.

velorooms

Quote from: 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.

Find:

body
{
min-width: 750px;
}

Replace with:

@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
Admin and Owner of Velorooms.com - Using SMF 2.0.3 and Simpleportal 2.3.5

Rupurudu!

Quote from: velorooms on April 30, 2015, 12:47:24 PM
Quote from: 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.

Find:

body
{
min-width: 750px;
}

Replace with:

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

andy

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


Burke Knight

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.

♦ Ninja ZX-10RR ♦

#15
Did you try the solution provided in msg#4 or the one in msg #1?
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

Burke Knight

The edit in msg #4 is what the screenshot I posted WAS.

♦ Ninja ZX-10RR ♦

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

Ian M

Quote from: 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:

body
{
min-width: 750px;
}

Replace with:

@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?