CSS Media Queries to Hide and Show Page Elements

CSS media queries to hide and show page elements .

You have way to many media queries, the most you should have is three one for tablet, tablet landscape and mobile. Typically like this,

CSS

/** Mobile **/
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {

}

/** Tablet **/
@media only screen and (min-width : 768px) and (max-width : 1024px) {

}

/** Tablet (landscape) **/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

How would I hide an HTML element in a media query?

the problem you are experiencing stems from the fact that your column is not hidden only the content inside of it. To fix your issue without too much rewriting you have two options. option one add a nth-child selector to your column class and give it a display of none allowing you to show and hide it using your media queries or simply add a new class to the column you wish to hide and give that the display none property which you would then add to your media queries. Base your decision on how much browser compatibility you wish to uphold.

.column:nth-child(3) {
    display: none;
}

or

.column.hide-mobile {
    display: none;
}

The code in the snippet below has the nth-child solution in it just above your @keyframes. Hope this helps

body {  font-size: 1em;  font-family: 'Cabin', sans-serif;  background: black;  color: white;}
.container {  /* Mobile */  display: grid;  grid-template-columns: 1fr;  grid-template-rows: 50px 340px 1fr 50px;  grid-template-areas: "header" "advert" "main" "footer";  text-align: center;}
header {  grid-area: header;  display: flex;  flex-flow: wrap;  flex: 0 1 auto;  justify-content: space-evenly;  align-items: center;  padding: 5px 0 15px 0;  font-size: 1.3em;}
main {  grid-area: main;}
advert {  grid-area: advert;  background: url(./mi-vr-5.jpg);}
footer {  grid-area: footer;  margin: 1em 0 0 0;}
.title {  font-size: 3em;}
.title-shift {  margin: 90px 0 0 0;}
.title-shift-h3 {  transform: translate(0, -25px)}
.title-shift-p {  transform: translate(0, 15px)}
.text-style {  background: -webkit-linear-gradient(80deg, white, #AEC6DF);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}
.channel {  display: flex;  justify-content: space-evenly;  font-size: 1em;}
.chan-img {  width: 160px;  height: 40px;  border-radius: 5px;  transition: 1s;}
.chan-img:hover {  transform: scale(1.1);  transition: 1s;}
.chan-content {  display: flex;  position: relative;  width: 100%;  padding-bottom: 56%;  margin: 8px 0 0 0;}
iframe {  width: 100%;  height: 100%;  position: absolute;  display: block;}
.line {  width: 100%;  border-top: 2px solid white;  opacity: 0.3;}
a {  color: white;}
img {  margin: 10px 0 0 0;  object-fit: cover;  width: 100%;  height: 100px;}
.bot-bar {  display: flex;  flex-flow: wrap;  flex: 0 1 auto;  justify-content: space-evenly;  align-items: center;  padding: 0 0 1em 0;  font-size: 0.8em;}
.bot-bar>a {  color: white;}
.bot-bar>a>img {  width: 20px;  height: 20px;  transition: 0.7s;}
.bot-bar>a>img:hover {  transition: 0.7s;  transform: scale(1.3);}
#hide {  display: none;}
#hide-desktop {  display: none;}
form {  margin: 20px 0 0 0;}
.input-div {  margin: 20px 0 20px 0;}
input {  border: 1px solid white;  border-radius: 5px;  background: black;  padding: 0 5px 0 5px;}
textarea {  border: 1px solid white;  border-radius: 5px;  background: black;  padding: 0 5px 0 5px;}
.bg-righttoleft {  -webkit-animation: bg-righttoleft 3s ease-in-out;  background-position: 50% 75%;  background-size: 1000px;}
.righttoleft {  animation-name: righttoleft;  animation-duration: 3s;}
.lefttoright {  animation-name: lefttoright;  animation-duration: 3s;}
.vid-anim {  animation-name: lefttoright;  animation-duration: 3s;}
.column:nth-child(3) {  display: none;}
@keyframes bg-righttoleft {  0% {    background-position: 20% 75%;    opacity: 0;  }  100% {    background-position: 50% 75%;  }}
@keyframes opacity {  0% {    opacity: 0;  }  100% {    opacity: 1;  }}
@keyframes righttoleft {  0% {    transform: translateX(100%);    opacity: 0;  }  100% {    transform: translateX(0);  }}
@keyframes lefttoright {  0% {    transform: translateX(-100%);    opacity: 0;  }  100% {    transform: translateX(0);  }}
@media only screen/* Tablet */
and (min-width: 885px) {  .container {    grid-template-columns: 1fr;    grid-template-rows: 50px 340px 1fr 50px;    grid-template-areas: "header" "advert" "main" "footer";  }  body {    font-size: 1.2em;  }  header {    font-size: 1.4em;  }  advert {    background-repeat: no-repeat;    font-size: 0.9em;  }  .title-shift-p {    transform: translate(0, -5px);  }  .channel {    justify-content: center;    align-content: center;  }  .chan-text {    transform: translate(0, 18px);    margin: 0 20px 0 40px;  }  .chan-content {    display: flex;    position: relative;    flex: 0 1 auto;    padding-bottom: 0%;    background: green;  }  .column {    display: flex;    flex-direction: column;    margin: 0 10px 0;    background: yellow;  }  .vid-contain {    position: relative;    overflow: hidden;    padding-bottom: 56%;  }  .column-text {    min-height: 320px;  }  iframe {    position: absolute;    width: 100%;    height: 100%;    left: 0;    top: 0;  }  .bot-bar {    font-size: 0.8em;    margin: 20px 0 0 0;  }  img {    margin: 10px 0 0 0;    object-fit: cover;    width: 50%;    height: 200px;  }  .vid-anim {    animation-name: opacity;    animation-duration: 6s;  }  .bg-righttoleft {    background-size: 2000px;    background-position: 50% 50%;  }  @keyframes bg-righttoleft {    0% {      background-position: 0% 50%;      opacity: 0;    }    100% {      background-position: 50% 50%;    }  }  #hide {    display: block;  }  #hide-desktop {    display: none;  }  }
@media screen/* Desktop/Laptop */
and (min-width: 1900px) {  .container {    max-width: 2500px;    grid-template-columns: 250px 1fr;    grid-template-rows: 50px 340px 1fr 50px;    grid-template-areas: "header header" "sidebar advert" "sidebar main" "footer footer";  }  sidebar {    background: url(./history-vr-banner.jpg);  }  .bot-bar {    font-size: 0.8em;  }  .column {    width: 33.3%  }  .column-text {    min-height: 310px;    padding: 20px 0 0 0;  }  #hide-desktop {    display: block;  }  .column:nth-child(3) {      display: flex;   }}

<div class="chan-content">  <div class="column">    <div class="column-text">      <h3 id="hide">A comprehensive view of the Oculus Go</h3>      <p id="hide" class="col-p-shift">        This review is an extensive and in-depth insight into the pros and cons of owning an Oculus Go over the alternatives. At a much lower price point than the Oculus Rift, the Go has a few drawbacks. <br><br>No Oled display, no headphones and no space        positioning. However, the resolution on the go is higher than the Rift giving a clearer, cleaner image. Perfect for media consumption.      </p>    </div>    <div class="vid-contain vid-anim">      <iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    </div>  </div>  <div class="column">    <div class="column-text">      <h3 id="hide">An in-detail talk about the Oculus Quest</h3>      <p id="hide" class="col-p-shift">        After an explanation of the latest hardware Oculus intend on releasing Adam Savage Tested have a chat with Product Manager Sean Liu about the hardware inside the up and coming Oculus Quest. <br><br>The Quest will receive a resolution upgrade to        1440-1600 whilst keeping the Oled colours Rift owners love as well as making sensors redundant with sensors built into the headset. Oh, and it's cordless!      </p>    </div>    <div id="hide" class="vid-contain vid-anim">      <iframe src="https://www.youtube.com/embed/xAngb0wRZJM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    </div>  </div>  <div class="column">    <div class="column-text">      <h3 id="hide-desktop">Chronos is a unique third-person experience</h3>      <p id="hide-desktop" class="col-p-shift">        Created by Oculus, Chronos is another take on what can be achieved with VR technology. The game is a third-person, room-based RPG with stunning 3D visuals and well-designed combat mechanics.        <br><br>The concept is also original. As your character dies throughout the game he advances in age shuffling his abilities from melee combat to magic. Chronos is a therapeutic gaming experience that should not be missed!      </p>    </div>    <div id="hide-desktop" class="vid-contain vid-anim">      <iframe src="https://www.youtube.com/embed/YrwxZcsKIJU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    </div>  </div></div>

How to hide or show correctly page element (with media query of pure css)?

Not only display can be achieved it.
you can use visibility height. Like this:

.show{visibility: visible;height: auto;}
.hide{visibility: hidden; height: 0;}

How to show/hide elements using media query?

Try this - DEMO

@media only screen and (max-width: 768px) {
    body{
        background:#030;
    }
    .menu li{    
        font:12px Verdana;    
        width:100px;
        padding-left:10px;
    }
    .menu li:last-child{    
        display: none
    }
}

@media only screen and (min-width: 769px) {
    body{
        background: honeydew;
    }
    .menu li{    
        font:22px Verdana;    
        width:200px;
        padding-left:20px;
    }
}

Div show/hide media query

I'm not sure, what you mean as the 'mobile width'. But in each case, the CSS @media can be used for hiding elements in the screen width basis. See some example:

<div id="my-content"></div>

...and:

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 1024px) {
  #my-content { display: none; }   /* hide it elsewhere */
}

Some truly mobile detection is kind of hard programming and rather difficult. Eventually see the: http://detectmobilebrowsers.com/ or other similar sources.

CSS media to hide/show div in mobile and desktop?

I have just checked the live link.

Meta tag is missing for responsive devices.

Add the below code for detecting mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

How to Hide particular div tag using media query, CSS, Javascript, Jquery for tablet device

IMO it's better to add class names to the markup vs using nth-child. If you or someone on your Team ever modifies the page or module, it'll break the desire of that rule. Not the biggest deal in the world. Really boils to quick and dirty vs elegant solutions.

---

Related Topics