CODEWITHSUNDEEP
htmlcss
Matthias Schmid
Matthias Schmid

Reputation: 1

How do I deactivate css code on tablet and mobile?

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>

Upvotes: 0

Views: 174

Answers (2)

PRATHAMESH GIRI
PRATHAMESH GIRI

Reputation: 75

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

}

Upvotes: 1

Nico Shultz
Nico Shultz

Reputation: 1872

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

Upvotes: 0

Related Questions