What is the best way to control the visibility of content using CSS based on the screen size?

Similar to Bootstrap, Ionic (specifically Ionic 3) allows for resizing column widths based on screen size using classes like col-sm-8, col-md-6, col-lg-4. Bootstrap also includes classes such as visible-xs, hidden-sm, etc. for displaying or hiding content based on screen size. Does Ionic 3 offer similar functionality for screen size responsiveness?

Answer №1

I integrated the CSS classes below from Bootstrap 4 Alpha into my project, and they are functioning perfectly.

.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;
}

Reference:

Answer №2

Illustration:

<div hidden-xs visible-block-md>Concealed on small screen</div>

A CSS solution could 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;
        }
    }
}

For Ionic users, a similar approach could be:

@each $breakpoint in map-keys($screen-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);

    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
        // For floating the element based on the breakpoint, include `[hidden-{bp}]` attributes
        [hidden#{$infix}] {
            display: none !important;
        }
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjustable height for the absolute element

Having a bit of an issue with the height of the absolute div. About: .wrapper - I want the wrapper to automatically adjust its height but be limited by a max-height. (No scrolling for the wrapper) .title - Just a title .content - The problem aris ...

Shades of Grey in Visual Studio Code

Whenever I use VSC, I notice these odd grey boxes that appear in my editor. They seem to be dynamic and really bother me. Interestingly, switching to a light theme makes them disappear. However, I prefer using a dark theme and haven't been able to fin ...

Adjust the transparency of an image preview using jQuery

Currently, I am working on creating a video gallery for a friend and I am experimenting with changing the thumbnail opacity using jQuery fade effect. While I can achieve this with CSS, I want to implement it with jQuery for a smoother transition. If you ...

Align button text vertically in the middle using Flexbox with Bootstrap 4

Why is the text in the button displaying at the top instead of the center when using internet explorer? button { height: 100px; } <div class="container"> <button class="w-100 f-default-f btn btn-primary d-flex justify-content-between px-3"& ...

Webpack doesn't seem to be able to display custom fonts

I have a small project in progress using webpack. One of the tasks I'm facing is loading custom fonts. I followed the official tutorial here, where it explains how to handle assets in webpack configuration. My custom fonts are located within the src ...

What is preventing my h1 styles from being applied to an h1 element within a <section> tag?

I have a headline in my header and in another part of the content. I've been told that this can impact SEO, but I'm just starting out by copying other people's pages and trying to replicate their styles without looking at their code. The st ...

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

Using jQuery to select the child element of the parent that came before

Recently, I've been experimenting with creating animations using CSS and jQuery. While it has been successful so far, I'm now looking to take it a step further. Specifically, I want information to appear on top of an image when the user clicks on ...

What is the best way to recreate this base with shadow, highlight effects, and a color that's not flat?

Click here to view the image I have successfully recreated part of it: a bottom with rounded corners, solid border, and solid colored background. However, I am struggling with achieving certain effects such as the highlighted top portion - where the backg ...

Using JQuery to trigger CSS3 animations on one element when clicking on another

My Rails app has a feature similar to reddit where users can upvote or downvote content. I'm currently working on creating a CSS3 animation that triggers when a user clicks the downvote button. Here's how I'm using JQuery: <div class="a ...

Tips for creating a CSS transition that reverses direction

Is there a way to create a hover effect where a border appears at the bottom of an element when it is being hovered over, and then retracts back when the mouse leaves the element? I've managed to get the border to appear on hover using CSS, but I&apos ...

How can you create a table cell that is only partially editable while still allowing inline JavaScript functions to work?

Just a few days back, I posted a question similar to this one and received an incredibly helpful response. However, my attempt at creating a table calculator has hit a snag. Each table row in a particular column already has an assigned `id` to transform t ...

Having issues with customizing the design of MaterialUI Accordion header

Link to my code sandbox project I am encountering issues with the styling in my Accordion Heading. My Accordion Contents are set up like this: <Accordion heading1= { <DishItem name="Döner Teller Spezial" price="13,60€"/> ...

Responsive design for iPads and smartphones is essential in ensuring a seamless user

Currently in the process of creating my own personal website, I have been diligently using Chrome Canary to ensure that all my media queries are properly set up. While everything looks great on Canary and functions well in various device modes within the b ...

Unable to fetch css file in Node.js

I am currently in the process of learning Node.js, but I have encountered a small issue with retrieving data from a css file. Interestingly, when I directly add the data to the index file's code, it seems to work perfectly. Let me share the relevant ...

Designing a captivating loading screen in Sencha Touch optimized for various mobile device resolutions

I am currently working with Sencha Touch 1.1 and I need my application to be compatible across various mobile platforms such as Android, iPhone, iPad, and Blackberry. One of the requirements is to have a splash screen at startup, which I have tried impleme ...

Having trouble getting the AJAX script to change the background in Internet Explorer?

I'm currently experiencing an issue with an ajax script. Here is the code I am using: <script type="text/javascript"> $(document).ready(function() { $('#savecolor').click(function(){ var myVar = 'data= ...

I have decided to integrate Laravel with Vite for building CSS and JS. However, when I attempted to run `npm run dev`, it appeared to execute but was accompanied by an error in the background that

Hi there, I'm new to Laravel and I've created a small app that primarily uses CSS and JS scripts. Everything was working fine in my development environment, so I decided to push it to a production server. However, after installation, my code does ...

Enable jquery offsetParent() function

$(document).ready(function(){ $("button").click(function(){ if ($("p").offsetParent().css("background-color") === "red") { $("p").offsetParent().css("background-color", "yellow"); } else { $("p").offsetParent().c ...

What could be causing such a significant impact on the row height in a CSS table when a tiny image is inserted next to an input box?

Currently, I am facing a unique challenge while setting up a form using CSS tables. The issue is best explained through a fiddle: http://jsfiddle.net/GdgV4/6/ In the third row, you'll notice that adding an image with a height less than the input box ...