Author Topic:  How to make Simple Portal responsive using CSS3  (Read 11053 times)


0 Members and 1 Guest are viewing this topic.

August 23, 2013, 03:04:25 PM

Offline Brian

  • Administrator
  • Jr. Member
  • *
  • Posts: 49
  • Country: us
  • Karma: 0
    • View Profile
How to make Simple Portal responsive using CSS3
« on: August 23, 2013, 03:04:25 PM »

(Register to disable this ad!)
"ns"

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:

Code: [Select]
#sp_right
{
vertical-align: top;
}

Replace with this:

Code: [Select]
@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.  8)

For a demo, just resize the home page of SMF Help.
« Last Edit: June 27, 2014, 09:54:38 AM by Brian »

June 29, 2014, 06:30:59 AMReply #1

Offline Brian

  • Administrator
  • Jr. Member
  • *
  • Posts: 49
  • Country: us
  • Karma: 0
    • View Profile
Re: How to make Simple Portal responsive using CSS3
« Reply #1 on: June 29, 2014, 06:30:59 AM »
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:
Code: [Select]
#sp_left
{
vertical-align: top;
}

Replace with:
Code: [Select]
@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.
« Last Edit: June 29, 2014, 06:34:20 AM by Brian »

HostGator
Use SMFHELP25OFF for 25% off!
 

Namecheap