How do I deactivate css code on tablet and mobile?

Question

hey community I want to deactivate the following code for column count on mobile and tablet:

<!DOCTYPE html>
<html>
<head>
<style>
  
    div {
  text-align: justify;
  text-justify: inter-word;
}
  .newspaper2 {
    column-count: 2;
    column-gap: 68px
  }

.newspaper {
  column-count: 3;
  column-gap: 68px;
}

</style>
  </head>
</html>

Does this answer your question? [What is the best way to detect a mobile device?](https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device) — Dan Grahn, Jul 20 '20 at 14:51

score 1 · Answer 1 · answered Jul 20 '20 at 14:49

As per my opinion Media Query for Laptops and Desktops is as follows @media (min-width: 1025px) and (max-width: 1280px) And from your requirements for mobile device media query be like @media (max-width: 480px) and for tablets like Ipads in portrait mode @media (min-width: 768px) and (max-width: 1024px)

So just add your code under Media query for Laptop and desktop... Hope it works for you :)

@media (min-width: 1025px) and (max-width: 1280px) {
div {
text-align: justify;
text-justify: inter-word;
}
.newspaper2 {
    column-count: 2;
    column-gap: 68px
}

.newspaper {
column-count: 3;
column-gap: 68px;
}

}

score 0 · Answer 2 · answered Jul 20 '20 at 14:01

Look into media queries https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

this will only be used when the screen is larger than 600px

@media only screen and (min-width: 600px) {
    div {
    text-align: justify;
    text-justify: inter-word;
    }
    .newspaper2 {
        column-count: 2;
        column-gap: 68px
    }

    .newspaper {
    column-count: 3;
    column-gap: 68px;
    }
}

How do I deactivate css code on tablet and mobile?

2 Answers2