How can I hide a cell on a specific breakpoint?

1.8k Views Asked by Matthias Güntert At 04 April 2025 at 01:48

I have the following base layout, which I now would like to transform into a responsive grid using pure css.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ... --> 
</head>
<body>
    <div class="pure-g">
        <div class="pure-u-1">Navigation</div>

        <div class="pure-u-5-24">left space</div>

        <div class="pure-u-11-24">content</div>
        <div class="pure-u-3-24">ToC</div>

        <div class="pure-u-5-24">right space</div>

        <div class="pure-u-1">Footer</div>
    </div>
</body>
</html>

Unfortunately I have no clue how I can hide e.g. <div class="pure-u-3-24">ToC</div> on a specific breakpoint.

I had a look into the base file pure.css as well as the css containing the classes for the grid grids-responsive.css. There seems to be no such thing as .hidden-*-down class known from Bootstrap. Also I coudn't find any (purecss-) utilities to accomplish this.

How can I accomplish my goal and hide an element on a specific breakpoint using PureCSS?

Original Q&A

There are 2 best solutions below

doğukan On 28 October 2019 at 21:11 BEST ANSWER

You can use media queries. ToC will hide under 728px.

@media screen and (max-width:728px){
  .pure-u-3-24 {
    display:none;
  }
}

<div class="pure-g">
  <div class="pure-u-1">Navigation</div>

  <div class="pure-u-5-24">left space</div>

  <div class="pure-u-11-24">content</div>
  <div class="pure-u-3-24">ToC</div>

  <div class="pure-u-5-24">right space</div>

  <div class="pure-u-1">Footer</div>
</div>

Elham Pilevar On 17 June 2021 at 08:37

First you can add this css to your css files :

/* pure-hidden-md *
@media screen and (max-width:48em) {
.pure-hidden-md {display:none}

}

Now add class "pure-hidden-md" to anywhere:

<div class="pure-u-3-24 pure-hidden-md">ToC</div>

How can I hide a cell on a specific breakpoint?

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in RESPONSIVE-DESIGN

Related Questions in PURE-CSS

Trending Questions

Popular # Hahtags

Popular Questions