Support > English Support

Getting Simple Portal to pass Googles modile friendly test

<< < (3/5) > >>

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:

--- Code: ---body
{
min-width: 750px;
}

--- End code ---
Replace with:

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

--- End code ---

--- End quote ---

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

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:

--- Code: ---body
{
min-width: 750px;
}

--- End code ---
Replace with:

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

--- End code ---

--- End quote ---

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

--- End quote ---
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!).

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.

Navigation

[0] Message Index

[#] Next page

[*] Previous page