Astral.CSS

Astral.CSS v.3.1
Get Started
Layout
Form
Components
Utilities
JavaScript
Theme
Astral.CSS is amazing! 🚀

CSS Visibility

Utilize visibility utilities to control the visibility of elements without altering their display properties, ensuring a seamless user experience in your web design

What is CSS Visibility?

CSS visibility is a property that controls the visibility of an element on a webpage.

Overview

Set the visibility of elements with our visibility utilities. These utility classes do not modify the display value at all and do not affect layout – .invisible elements still take up space in the page.

Elements with the .invisible class will be hidden both visually and for assistive technology/screen reader users.

Apply .visible or .invisible as needed.

...

...

Responsive Visibility

Visibility utility classes that apply to all breakpoints, from sm to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query.

As such, the classes are named using the format:

  • .visible for sm to xl
  • .invisible for sm to xl
  • .visible-{breakpoint} for sm, md, lg,and xl.
  • .invisible-{breakpoint} for sm, md, lg,and xl.

Change the viewport to see this in action

I am invisible on medium screens



I am invisible on medium screens

Designed and built with by Rume Aluya.