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. 
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: 
1.Create a code block to define media query style declarations.
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.Create a code block to define media query style declarations.
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)
Using media queries - CSS: Cascading Style Sheets | MDN
Styling Hyperlinks
Creating a Fixed Header
Last modified 3yr ago