• Home
  • Quick Start
  • Get Started
  • Infrastructure
  • General Web Instruction
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
UT Shield
College of Fine Arts Drupal Instructions
  • Home
  • Quick Start
    • Editor Access, Workflow, Approvals & Roles
    • FAQs and Recommended Workflows
  • Get Started
    • The Dashboard
    • Content Types and Layout
      • Categories, Taxonomy and Terms
      • Landing Pages
      • Layout Builder Sections & Blocks
        • Listing Blocks
        • Reusable Blocks
        • Main Navigation Block
        • Quick Links Block
        • Featured Content Blocks
        • Ambient Video Block
      • Announcement Banner
      • Events
        • University Calendar Instructions
        • Pre-Filtered Link
    • Create, Publish, Edit, Unpublish, Delete, Archive
      • Content States: Published, Unpublished & Draft
      • Create Content
      • Edit Existing Content
      • Publishing Content
      • Delete, Unpublish, Archive
      • Revisions
      • Clone
    • Menus, Paths & Links
      • Editing Menus
      • URL Path Address
      • Create a Link
        • Linking to Another Spot on the Page
        • Pre-Filtered Link
        • Non-Visible Link Context and Visually Hidden
      • Secondary Menu
      • Duplicate Menu Label, URL or Title Issues
    • Rich Text Editor
      • Create a Link
        • Linking to Another Spot on the Page
        • Pre-Filtered Link
        • Non-Visible Link Context and Visually Hidden
      • Insert an Image
        • Left & Right Image Alignment
      • Insert a Document
      • Multimedia and Embeddable Content
      • Adding Hide/Reveal Elements
      • Tabular Data in Tables
      • Responsive Word Wrapping & Hyphenation
      • HTML Source
        • Hide on Desktop or Hide on Mobile
    • Media (Images, Documents & Videos) Management
      • Insert an Image
      • Insert a Document
      • Multimedia and Embeddable Content
  • Infrastructure
    • Site Search
    • Caching
    • Community Factors
    • Database vs. Code
    • Test Site
    • Release Cycles
  • General Web Instruction

Hide on Desktop or Hide on Mobile

Last Updated November 2024

The following is rather advanced so please contact the web team for assistance.

There are two special classes we have made available for the site:

  • class="hide-on-desktop"
  • class="hide-on-mobile"

As the names would suggest these can be used to create content that is only for desktop or mobile sized devices. You can add the CSS class in the source code (learn more about HTML).

You will not see the change in the editing interface. Only when viewing the page on the appropriately sized device will the content be hidden.

Improve Mobile Experience

Since content gets so narrow on mobile it may be useful to combine a jump link and the hide on desktop class.

Completely Visually Hidden

It’s very rare but there is a way to hide content from the visual display so that it is only displayed by text only devices.

Primary Sidebar

Open Office / Co-Working Sessions

Second Monday of the month:
11 a.m. – 12:30 p.m.

Fourth Thursday of the month:
2 p.m. – 3:30 p.m.

Email us for the Zoom link.

College of Fine Arts Web Instruction
Subscribe to our email list to receive periodic tips and resources for generating great digital content

Contact Us

The COFA Web team can be reached by emailing us at cofawebmaster@austin.utexas.edu

UT Home | Emergency Information | Site Policies | Web Accessibility | Web Privacy | Adobe Reader

© The University of Texas at Austin 2025