Responsive theme

Supported devices

This theme 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 Menu mobile – left and right column inline – logo and footer centered
Phones and little tablets 767px and below users position inline

/* Portrait tablet to landscape and desktop */

/* Phone and little tablet */

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
visible-tablet Visible
visible-desktop Visible
hidden-phone Visible Visible
hidden-tablet Visible Visible
hidden-desktop Visible Visible

When to use

Use for each WordPress widget 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 the field „CSS class” of your widget.

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.

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Zasady dotyczace cookies: Ta strona wykorzystuje pliki cookies. Mozna zablokować zapisywanie plików cookies, zmieniając ustawienia przegladarki.
Więcej informacji