Custom Classes

Joomlashine has removed this valuable tool from all of their templates. There is another narrow option but this does not seem to be used, it is there should the eed ever arise.

The following code is designed to allow you to use the Joomlashine responsive display options but as class that you can use for elements in your WYSIWYG code. These classes use to work on their own but this feature was removed. I have used the real code out of the template to create this code. I based this code on the JSN Time template.

Add the following CSS to your a custom.css file.

Just add any of the following as a class to your html element and the normal Joomlashine responsive behaviour will occur.

• display-desktop
• display-mobile
• display-tablet
• display-smartphone

NB: when using @media statements, they need to be in the correct order otherwise errors will occur and the rules will not work. I am not a 100% how the rules should be ordered but he rules below worked. Netbeans IDE can help you put them into order if you get stuck.

/************************************************************************************
 Desktop Layout (960+)
 *************************************************************************************/
 @media only screen and (min-width: 961px), (min-device-width: 961px) {
     
    .display-mobile,
    .display-smartphone,
    .display-tablet {
        display: none;
    }
    
    .display-desktop {
        display: block;
    }
    
 }

/************************************************************************************
Mobile Layout (240 - 960)
*************************************************************************************/
@media only screen and (max-width: 960px), (max-device-width: 960px) {
    
    .display-desktop {
        display: none;
    }
    
    .display-mobile {
        display: block;
    }

}

/************************************************************************************
 Tablet Wide Layout (481 - 960)
*************************************************************************************/
@media only screen and (min-width: 481px) and (max-width: 960px), (min-device-width: 481px) and (max-device-width: 960px) {
    
    .display-smartphone,
    .display-desktop {
        display: none;
    }
    
    .display-tablet {
        display: block;
    }
    
}

/************************************************************************************
 Tablet Narrow Layout (481 - 767) - Not Need For Anything - Just here for reference
*************************************************************************************
@media only screen and (min-width: 481px) and (max-width: 768px), (min-device-width: 481px) and (max-device-width: 768px) and (orientation:portrait) {
 
}*/

/************************************************************************************
Smartphone Layout (320 - 480)
*************************************************************************************/
@media only screen and (max-width: 480px), (max-device-width: 480px) { 
    
    .display-tablet,
    .display-desktop {
        display: none;
    }
    
    .display-smartphone {
        display: block;
    }

}

Workaround method

You can also create a div with the following format which works because it matches the CSS code in the template.

<div class="jsn-modulecontainer display-desktop"></div>

The 3 factors that are required:

• Must be a <div>
• jsn-modulecontainer must be first
• followed by display-desktop