Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

  1. How to section

Showing elements by size

Show elements by size of viewport

PreviousStyling HyperlinksNextCreating a Fixed Header

Last updated 5 years ago

Was this helpful?

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.

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

The steps are as follows:

  1. Add the code block to the artboard.

  2. Select the object you want to show or hide.

  3. In the classes field enter the name(s) of the appropriate classes

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:

  1. Add the code block to the artboard.

  2. Select the object you want to show

  3. In the object properties uncheck Displayed or alternatively turn off the visibility in the layers

  4. In the classes field enter the name(s) of the appropriate classes (show-on-mobile)

At this time there is no built in way to show or hide elements except for .

Create a to define media query style declarations.

Using media queries inspired by or derived from and 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; } }

Create a to define media query style declarations.

artboards
code block
MDN
Unsemantic
code block
Hide Visible Elements
Display Hidden Elements
Using media queries - CSS: Cascading Style Sheets | MDN
Enter class names in class name field
Hide on desktop and hide on tablet
Logo