With version 1.3R TinyPortal can deal with responsive themes. From version 1.4.1. this functionality is part of the core functionality. It is now possible to use TP on a responsive theme as well as on traditional non-responsive themes at the same time!

Here is how it works...

What does that mean, 'responsive'?

QuoteResponsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD. Content, design and performance are necessary across all devices to ensure usability and satisfaction.

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:

Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic. Therefore, Google announced Mobilegeddon in 2015, and started to boost the ratings of sites that are mobile friendly if the search was made from a mobile device. Responsive web design is an example of user interface plasticity.

Source: Wikipedia

The default Curve theme for SMF 2.0 is NOT responsive, meaning it does not adapt to smaller screens. However many custom themes are available for SMF and more and more of these themes are in fact responsive: using a mobile device the forum becomes narrower, images are displayed smaller in order not to stretch outside the screen and some elements are even completely suppressed. With the Mobile Curve MOD now even the standard Curve theme can adapt to smaller screen sizes.

The default Curve2 theme for SMF2.1 is fully responsive, as are pretty much all custom themes for SMF2.1.

How does TinyPortal work with a responsive theme?
Up to version 1.3 of TP, the TinyPortal MOD was not able to properly deal with the variable screen widths in responsive themes. In these versions TinyPortal does work on these themes, but once the screen width gets lower than approximately 900px the side panels are effectively taking over from the main content. The main challenge every portal faces is dealing with the side panels: if you wish to continue using an older version of TP with a responsive theme you can choose not to use the side panels.  

As of 1.3R the TinyPortal setup has been changed: once the screen width becomes narrower than 900px the left and right panels are automatically 'pushed' below the main content, keeping the responsive design intact, while still presenting all block content to the visitor.
Note: all this is managed using CSS, see file /tp-style.css for details.

As you can see: on a mobile device the left panel is automatically moved to the bottom of the content...




Example 1: TinyPortal on a theme that is not responsive:


Example 2: TinyPortal on a theme that IS responsive (responsive Curve):


What settings to make
The whole CSS stuff required is available 'out of the box' once you install the latest version of TinyPortal. The only thing you need to do, is to tell TinyPortal which of your themes are responsive an which are not. This is controlled in the general settings for TinyPortal.

To begin go to "TinyPortal > Settings & Frontpage".


Select non responsive themes: Here you can specify what themes are responsive.
TinyPortal will automatically list all themes that your have installed in your forum: if you have many, the list will be long...
Now set the tickbox for each responsive theme, complete the entire list and use the [Save] button to confirm.

Note: due to browser caching is may be that your browser has still kept an old .css file(s): if the results of the changes are not immediately visible, first refresh browser cache (Ctrl+F5).

To change settings for the themes you have to select Deselect all themes, save the setting with the [Save] button under the last theme and redo all your theme settings.

Last updated 10-Jan-2022 by @rjen