Supported devices
This template supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. You can find all the code in "css/media-queries.css"
Here's what's included :
| Label | Layout width | Characteristics |
|---|---|---|
| Default | 980px and up | Standard display. |
| Portrait tablets | 768px and above | Header centered. Left and right columns inline |
| Phones and little tablets | 767px and below | Mobile menu - User modules inline |
/* Portrait tablet to landscape and desktop */
@media(min-width:768px)and(max-width:979px){...}
/* Phone and little tablet */
@media(max-width:767px){...}
Responsive utility classes
For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).
| Class | Phones 767px and below | Tablets 979px to 768px | Desktops Default |
|---|---|---|---|
visible-phone |
Visible | Hidden | Hidden |
visible-tablet |
Hidden | Visible | Hidden |
visible-desktop |
Hidden | Hidden | Visible |
hidden-phone |
Hidden | Visible | Visible |
hidden-tablet |
Visible | Hidden | Visible |
hidden-desktop |
Visible | Visible | Hidden |
When to use
Use for each Joomla module and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
How to use
You must add the class in Module class suffix of your module.
Responsive utilities test case
Resize your browser or load on different devices to test the above classes.
Visible on...
Green checkmarks indicate that class is visible in your current viewport.
- Phone✔ Phone
- Tablet✔ Tablet
- Desktop✔ Desktop
Hidden on...
Here, green checkmarks indicate that class is hidden in your current viewport.