Showing elements by size
Show elements by size of viewport
Last updated
Show elements by size of viewport
Last updated
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.
If you are on a mobile device the visible area is typically less wide than the area on a desktop computer browser.
At this time there is no built in way to show or hide elements except for artboards.
But for individual elements or groups of elements you can do it manually.
The steps are as follows:
Create a code block to define media query style declarations.
Add the code block to the artboard.
Select the object you want to show or hide.
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.
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:
Create a code block to define media query style declarations.
Add the code block to the artboard.
Select the object you want to show
In the object properties uncheck Displayed or alternatively turn off the visibility in the layers
In the classes field enter the name(s) of the appropriate classes (show-on-mobile)
