SimplePortal
Support => English Support => Topic started 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.
-
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.
-
Would be nice to drop both L/R columns to the bottom if possible. (http://outdoorclubjapan.com/Smileys/clabicons/alabanzaa.gif)
-
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.
-
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;
}
}
-
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 ;)
-
That works well...
@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.
-
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.
-
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;
}
}
-
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.
-
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.
-
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
-
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.
-
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!).
-
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.
-
Did you try the solution provided in msg#4 or the one in msg #1?
-
The edit in msg #4 is what the screenshot I posted WAS.
-
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.
-
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?
-
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
-
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
-
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:
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;
}
}
I do this change but now the shoutbox is impossible to use.
(http://i.imgur.com/UBi53aJ.png)
-
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!