Topic: Responsive

[Petter]

Is there a way to make the side columns collapse automatically at small window sizes? Or when using mobile phones?

well.. there could be way to use JavaScript to detect screen resolution and if detected dimensions are lower than **px x **px run:

Code: [Select]

$modSettings['showleft'] = '0';
$modSettings['showright'] = '0';


I remember that I tried to make something with JS screen resolution detection, but it never worked as it should... Maybe someone else can help more


I'm sure that there is better way to deal with this than disabling blocks :E

[Petter]

This is mentioned at: http://www.idesign360.com/community/index.php/topic,424.msg1913/
No answer, but I do think the site is using Simpleportal with automatic collapse of the sidebar (try resizing browser window). Can anyone find out how it´s done?

[Petter]

I only have a column on the right side. Would it be easier to have it just pop down under the main content when the window size is narrow?

[[SiNaN]]

It should be easier to hide it. You could add something like this at the end of portal.css file:

Code: [Select]

@media only screen and (max-width: 480px)
{
#sp_right
{
display: none;
visibility: hidden;
}
}

[Petter]

Thanks SiNaN!
Works fine! I will use this on my site.


I read at http://www.responsivegridsystem.com
on how to make the column show below the main content, but did not understand.
With

Code: [Select]

@media only screen and (max-width: 780px)
{
   #sp_right
   {
      width: 100%;
   }
} the column covers the main content.
Maybe that grid system is not applicable the way SP is built?

Since the column is loaded even if its hidden, I thought the best is to make use of it and show it below.

[[SiNaN]]

We're using a table to keep the blocks intact. So it's not as easy to just display it below. This will probably change in the next versions thought, when we get to re-code the templates.

[Petter]

We're using a table to keep the blocks intact. So it's not as easy to just display it below. This will probably change in the next versions thought, when we get to re-code the templates.


Could it be a built in feature to let the right side column disappear/ show below at small screen sizes?

[[SiNaN]]

Maybe. The responsive design thing is getting popular, so we may consider that.

[ccbtimewiz]

Probably due to the new age of more portable equipment being able to view the Internet.

Tables are becoming less and less used as building blocks for the foundation of a template and used specifically for organizing actual data now.

[Petter]

If I want the column to disappear at small window sizes, I can see 3 options. I would be very glad if anyone can tell me if they are possible, and which would be the best.


1. Hide the side column with "@media only screen and (max-width: 480px)" and make it show again when clicking a button? Possible?


2. Hide the side column with "@media only screen and (max-width: 480px)" and make a set of identical blocks at the bottom that are hidden at "@ (min-width: 480px)". The effect would be that the side column seems to pop under the main content at small widths. Possible?


3. No SP-column. Use a responsive sidebar menu like http://mmenu.frebsite.nl  and call SP-blocks to it. Possible?

[[SiNaN]]

They are all possible but it's for you to decide which one is the best for your case. I've shown the basic method of having screen size specific CSS declarations above. I won't be able to give you the exact code you want though.