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: 1045
  • 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!

Responsive

Started by Petter, November 25, 2013, 05:01:25 AM

Previous topic - Next topic

0 Members and 4 Guests are viewing this topic.

Petter


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


Quote from: phantomm on November 23, 2012, 03:40:35 AM
well.. there could be way to use JavaScript to detect screen resolution and if detected dimensions are lower than **px x **px run:

$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

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:

@media only screen and (max-width: 480px)
{
#sp_right
{
display: none;
visibility: hidden;
}
}
And slowly, you come to realize... It's all as it should be...

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 @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.
And slowly, you come to realize... It's all as it should be...

Petter

#6
Quote from: [SiNaN] on January 02, 2014, 05:43:47 PM
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.
And slowly, you come to realize... It's all as it should be...

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.
And slowly, you come to realize... It's all as it should be...