Hide element from mobile and tablet (in landscape and portrait) and show on desktop only

user_11225888 0
Viewed 522

I am trying to show a table of contents on my website, I only want it to appear on Desktop and laptops, but not on tablets or mobile in either portrait or landscape. I know it's possible with media queries, but I can't figure them out.

Here's what I have so far: 

@media only screen and (min-width: 64rem)
 .toc-container {
 display: none;
}
 .toc-container {
 display: -webkit-box;
 display: flex;
 -webkit-box-align: right;
 align-items: left;
}

@media screen and (min-width: 768px) 
.tiktoc {
 display: none;
 }

 .tiktoc {
 position: absolute;
 top: 165px;
 left: 1150px;
 bottom: 0;
 width: 350px;
 margin-bottom: 0;
 }
media-queries css html
1 Answers

You can play around with @media-query, so to disable the table on tablets and mobile devices

In the below code table is only showing on laptops and desktop devices only

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
  
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
  
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (max-width: 768px) {
  .tiktoc {
    display: none;
  }
}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {}

.tiktoc {
  position: absolute;
  width: 350px;
  margin-bottom: 0;
}
<table class="tiktoc">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

user_132022520
Related