แจกของฟรี

Here's a quick and easy way to make the column blocks in Simple Portal v2.3.5 disappear as the page width changes using the @media query in CSS3.

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, allows the presentation of content be tailored to a specific range of output devices without having to change the content itself.

In this example, we're going to make the right-hand column 'disappear' as the width of the screen falls below 1100 pixels. You can change the limit to whatever you like.

First, open portal.css in the Themes\default\css folder.

Starting at line 248, find the following:
#sp_right
{
    vertical-align: top;
}Replace with this:
@media (max-width: 1099px)
{
#sp_right
    {
        display:none;
    }
}
@media (min-width: 1100px)
{
#sp_right
    {
        vertical-align: top;
    }
}

Now, once the screen width falls below 1100 pixels, the right column is set to display: none, which will make it disappear.

This is just one example of how to use the @media query to change one rule. The @media query can be used with multiple selectors and declarations in CSS3, which opens endless possibilities for making your site more responsive.

You can also make the left column disappear when the screen width is smaller than a certain pixel so that only the middle column remains.

To set the left column to appear only when the screen size is larger than 800px, try this:

Open \Themes\default\css\portal.css

Find:#sp_left
{
    vertical-align: top;
}Replace with:
@media (max-width: 799px)
{
#sp_left
    {
        display:none;
    }
}
@media (min-width: 800px)
{
#sp_left
   {
    vertical-align: top;
   }
}

You can adjust the pixel width to whatever you want, just remember than the max-width: tag has to be 1 pixel smaller than the min-width: tag.

credit: http://www.smfhelp.com/index.php?topic=29.0