Log in  \/ 
x
or
x
x
Register  \/ 
x
or


search

After working with different frameworks and listening to and reading comments about responsive web design, we decided to add some mobile CSS classes to our Warp templates. The arguements we have heard:

  • "Not all modules should be displayed on the mobile version"
  • "I want some mods to show on mobile, but not on the desktop version"

These are valid points. Sometimes you might want to show something on the mobile version that users on the desktop don't see. Also, you might have a huge photo gallery on your desktop version and want to hide it on mobile. Since responsive web design uses only one template, how then can we accomlish this? Simple. We extended the in place system of Warp to use Module Class Suffixes.

Here are the classes we added:

.tablet-hide
.tablet-show
.phone-hide
.phone-show

How do they work?

Using media queries we added these mobile classes to the responsive.css file. As an example, lets say we want to show a module on mobile phones but not desktops. In our responsive.css file, we have the following code:

/* Only Phones */
@media (max-width: 767px) {
/* Mobile Classes */
.phone-hide {display:none;}
.phone-show {display:block;}

From the above eample, we see that if we use the class .phone-show then our output will be shown when the screen size is below 767px. In our main CSS, we have added already the following code:

.phone-show {display:none;}

So when viewing the site in any resolution above 767px, this output is not displayed. Once it drops below that threshold, it displays.

classes

 

How do I use them?

Simple. Just add some code to your module class suffix box with out the period. Example: phone-show

Now your module will only show on phones.

Explore

Your cart is empty.