---
description: Show elements by size of viewport
---

# Showing elements by size

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.&#x20;

For example, you can show one element on a mobile device and another element on a tablet device.&#x20;

There is a slight difference in options here. Show hidden elements or hide visible elements.&#x20;

{% embed url="https://youtu.be/U9TXv0FjeyU" %}
Hide Visible Elements&#x20;
{% endembed %}

{% embed url="https://www.youtube.com/watch?v=O4dMZU3jcRc" %}
Display Hidden Elements
{% endembed %}

If you are on a mobile device the visible area is typically less wide than the area on a desktop computer browser.&#x20;

At this time there is no built in way to show or hide elements except for [artboards](../export-types/media-query).&#x20;

But for individual elements or groups of elements you can do it manually.

The steps are as follows:&#x20;

1. Create a [code block](../creating-code-blocks) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) and [Unsemantic](https://unsemantic.com/) examples copy and paste this code into a style tag of a code block: \
\
`@media (max-width: 767px) {`\
&#x20; `.hide-on-mobile {`\
&#x20;   `display: none !important;`\
&#x20;  `}`\
`}`\
\
`@media (min-width: 768px) and (max-width: 1024px) {`\
&#x20; `.hide-on-tablet {`\
&#x20;   `display: none !important;`\
&#x20; `}`\
`}`\
\
`@media (min-width: 1025px) {`\
&#x20; `.hide-on-desktop {`\
&#x20;   `display: none !important;`\
&#x20; `}`\
`}`\
\
`@media (max-width: 767px) {`\
&#x20; `.display-on-mobile {`\
&#x20;   `display: block !important;`\
&#x20;  `}`\
`}`\
\
`@media (min-width: 768px) and (max-width: 1024px) {`\
&#x20; `.display-on-tablet {`\
&#x20;   `display: block !important;`\
&#x20; `}`\
`}`\
\
`@media (min-width: 1025px) {`\
&#x20; `.display-on-desktop {`\
&#x20;   `display: block !important;`\
&#x20; `}`\
`}`

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LtNYCFiutihv6AlaUTD%2F-LtPxEiWMz8Gw5c4oz1X%2Fimage.png?alt=media\&token=cf62bc9d-5bba-439e-b8fb-894964124bf1)

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LtNYCFiutihv6AlaUTD%2F-LtPx5m8ipyR6XuSaw6T%2Fimage.png?alt=media\&token=d2216b5a-eb8f-4279-ad6d-202f87fee4c8)

The styles define classes that will be apply when the page is at different sizes.&#x20;

Now that those classes are defined assign them to the classes field of the element you want to show or hide.&#x20;

![Enter class names in class name field](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LtNYCFiutihv6AlaUTD%2F-LtPwn1lo3DeOzZLGJq5%2Fimage.png?alt=media\&token=70ca129e-a39d-4874-bf4c-ed741c05a812)

![Hide on desktop and hide on tablet](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LtNYCFiutihv6AlaUTD%2F-LtPwPY8IznVmOnzCokq%2Fimage.png?alt=media\&token=a53f8dd3-0d1c-4469-b495-28faa269dd9d)

Complimentary to hiding elements by size is showing hidden elements by size.&#x20;

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LtPypcUFKnpgXCbrhwr%2F-LtQ-AKweRe6aOmoJOPX%2Fimage.png?alt=media\&token=6b3c70d5-ef7c-4c80-a76f-e8cf2ecff1af)

Use the `display-on-mobile`, `display-on-tablet` and `display-on-desktop` to display hidden elements.&#x20;

The steps are similar to hiding and are as follows:&#x20;

1. Create a [code block](../creating-code-blocks) 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)

{% embed url="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" %}
