Showing elements by size
Show elements by size of viewport
The viewport is the user's visible area of a web page or device. You can show or hide elements by the size of the viewport using Media Queries.
For example, you can show one element on a mobile device and another element on a tablet device.
There is a slight difference in options here. Show hidden elements or hide visible elements.
Hide Visible Elements
Display Hidden Elements
If you are on a mobile device the visible area is typically less wide than the area on a desktop computer browser.
But for individual elements or groups of elements you can do it manually.
The steps are as follows:
- 1.
- 2.Add the code block to the artboard.
- 3.Select the object you want to show or hide.
- 4.In the classes field enter the name(s) of the appropriate classes
Using media queries inspired by or derived from MDN and Unsemantic examples copy and paste this code into a style tag of a code block:
@media (max-width: 767px) {
.hide-on-mobile {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.hide-on-tablet {
display: none !important;
}
}
@media (min-width: 1025px) {
.hide-on-desktop {
display: none !important;
}
}
@media (max-width: 767px) {
.display-on-mobile {
display: block !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.display-on-tablet {
display: block !important;
}
}
@media (min-width: 1025px) {
.display-on-desktop {
display: block !important;
}
}


The styles define classes that will be apply when the page is at different sizes.
Now that those classes are defined assign them to the classes field of the element you want to show or hide.

Enter class names in class name field

Hide on desktop and hide on tablet
Complimentary to hiding elements by size is showing hidden elements by size.

Use the
display-on-mobile
, display-on-tablet
and display-on-desktop
to display hidden elements. The steps are similar to hiding and are as follows:
- 1.
- 2.Add the code block to the artboard.
- 3.Select the object you want to show
- 4.In the object properties uncheck Displayed or alternatively turn off the visibility in the layers
- 5.In the classes field enter the name(s) of the appropriate classes (show-on-mobile)
Last modified 3yr ago