2

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;
 }
ravetta
  • 43
  • 4
  • `min-width 768px` should hide everything in mobile, no need to do portrait or landscape if you want to hide the element altogether. I think that some tablets are effectively laptops (with removable or touch screen key boards and so have similar sizes and resolutions to some laptops, some are even bigger than some laptops and have higher pixel ratio. If you need a portrait/landscape media query though `@media(min-width: 768px) and (orientation:landscape) {.ticktock{display: none;}}` – Stacksof99 Jun 13 '20 at 11:06

1 Answers1

1

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>
Fareed Khan
  • 2,613
  • 1
  • 11
  • 19
  • Thanks for this, some of this appeared to work. I used this in the end of it has hidden it on both my iPad Air2 and iPhone 11 Pro, but is showing on desktop which is what I wanted. Can you see anything here that would not be covered by this? – ravetta Jun 13 '20 at 12:29
  • `/* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px), only screen and (min-width: 600px) /* Medium devices (landscape tablets, 768px and up) */ @media(min-width: 768px) and (orientation:landscape), only screen and (max-width: 768px) { .tiktoc { display: none; } .toc-container { display: none; } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { code here }` – ravetta Jun 13 '20 at 12:30
  • If i am not wrong, you are asking that the code you have provided in the comment section is covering all devices or not? – Fareed Khan Jun 13 '20 at 13:12
  • Yes, I am asking if the code I added in the comment section, which is taken from some of your code you provided, would it show only on desktop devices? I want to hide the element completely from mobiles and tablets. Thanks again. – ravetta Jun 13 '20 at 13:35
  • Yes your code is working absolutely fine and it does include all `devices`. I have used your code on `JSFIDDLE` just resize the result `tab`. It is showing the table only on desktop devices: https://jsfiddle.net/q6fm5wh8/1/. If you want a brief explanation of each and every device media query here is the link: https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile – Fareed Khan Jun 13 '20 at 17:43