How do I hide or show content with CSS based on screen size?
As Bootstrap, Ionic (Ionic 3) allows changing the column width on the basis of screen size using col-sm-8
, col-md-6
, col-lg-4
. Bootstrap also comes with classes like visible-xs
, hidden-sm
etc., which allows us to show or hide content according to the screen size. Does Ionic 3 include anything that allows us to do the same?
source to share
I copied the following CSS classes from Bootstrap 4 Alpha into my project and it works fine.
.invisible {
visibility: hidden !important;
}
.hidden-xs-up {
display: none !important;
}
@media (max-width: 575px) {
.hidden-xs-down {
display: none !important;
}
}
@media (min-width: 576px) {
.hidden-sm-up {
display: none !important;
}
}
@media (max-width: 767px) {
.hidden-sm-down {
display: none !important;
}
}
@media (min-width: 768px) {
.hidden-md-up {
display: none !important;
}
}
@media (max-width: 991px) {
.hidden-md-down {
display: none !important;
}
}
@media (min-width: 992px) {
.hidden-lg-up {
display: none !important;
}
}
@media (max-width: 1199px) {
.hidden-lg-down {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-xl-up {
display: none !important;
}
}
.hidden-xl-down {
display: none !important;
}
Docs
:
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
source to share
Example:
<div hidden-xs visible-block-md>Hidden on small screen</div>
The SCSS solution would be:
$screen-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
@each $keySize, $valueSize in $screen-breakpoints {
[hidden-#{$keySize}] {
@media (min-width: $valueSize) {
display: none;
}
}
}
@each $keySize, $valueSize in $screen-breakpoints {
[visible-block-#{$keySize}] {
@media (min-width: $valueSize) {
display: block;
}
}
}
@each $keySize, $valueSize in $screen-breakpoints {
[visible-inline-block-#{$keySize}] {
@media (min-width: $valueSize) {
display: inline-block;
}
}
}
If you are using Ionic you can go with something like:
@each $breakpoint in map-keys($screen-breakpoints) {
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
// Provide '[hidden-{bp}]' attributes for floating the element based
// on the breakpoint
[hidden#{$infix}] {
display: none !important;
}
}
}
source to share