Div should hide only on smartphones

Question

I am trying to hide a div on smartphone devices with media query but it does not work.When I resize the window smaller than (min-width: 1224px) the document is just blank.

The css looks as follow:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {    
  .container {
    display: none;
  }    
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {    
  .container {
    display: none;
  }    
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width: 320px) {    
  .container {
    display: none;
  }    
}

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

  .container {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .logo-container {
    display: flex;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#86c457+10,60a24d+100 */
    background: #86c457; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #86c457 10%, #60a24d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86c457', endColorstr='#60a24d', GradientType=1); /* IE6-9 fallback on horizontal gradient */    
  }

  .sign-in-container {
    display: flex;
    flex: 1 0 0;
    align-items: center;
  }

  .sign-in-container > .sign-in-form {    
    flex: 0 0 30em;
    margin-left: 60px;
  }

}

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

  .container {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .logo-container {
    display: flex;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#86c457+10,60a24d+100 */
    background: #86c457; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #86c457 10%, #60a24d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86c457', endColorstr='#60a24d', GradientType=1); /* IE6-9 fallback on horizontal gradient */

  }

  .sign-in-container {
    display: flex;
    flex: 1 0 0;
    align-items: center;
  }

  .sign-in-container > .sign-in-form {    
    flex: 0 0 30em;
    margin-left: 60px;
  }    
}

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

  .container {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .logo-container {
    display: flex;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#86c457+10,60a24d+100 */
    background: #86c457; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #86c457 10%, #60a24d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86c457', endColorstr='#60a24d', GradientType=1); /* IE6-9 fallback on horizontal gradient */

  }

  .sign-in-container {
    display: flex;
    flex: 1 0 0;
    align-items: center;
  }

  .sign-in-container > .sign-in-form {    
    flex: 0 0 30em;
    margin-left: 60px;
  }    

}

/* Desktops and laptops ----------- */
@media only screen
and (min-width: 1224px) {
  .container {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .logo-container {
    display: flex;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#86c457+10,60a24d+100 */
    background: #86c457; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #86c457 10%, #60a24d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86c457', endColorstr='#60a24d', GradientType=1); /* IE6-9 fallback on horizontal gradient */

  }

  .sign-in-container {
    display: flex;
    flex: 1 0 0;
    align-items: center;
  }

  .sign-in-container > .sign-in-form {    
    flex: 0 0 30em;
    margin-left: 60px;
  }
}

/* Large screens ----------- */
@media only screen
and (min-width: 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}

and html code:

<div class="container">
  <div class="logo-container">
    <img src="assets/images/micarna.svg"/>
  </div>
  <div class="sign-in-container">
    <div class="sign-in-form">    
      <div class="ui attached message">
        <div class="header">
          Welcome to micarna
        </div>
        <p>Please sign in with your sap account!</p>
      </div>    
      <form class="ui form attached fluid" style="margin-top: 40px">
        <div class="field">
          <div class="ui big left icon input">
            <input type="text" placeholder="Username">
            <i class="user icon"></i>
          </div>
        </div>
        <div class="field">
          <div class="ui big left icon input">
            <input placeholder="Password" type="password">
            <i class="lock icon"></i>
          </div>
        </div>
        <div class="big fluid ui blue submit button">Sign In</div>
      </form>    
    </div>
  </div>
</div>

When I resize the window smaller than (min-width: 1224px) the document is just blank, why? Thanks in advance.

score 0 · Answer 1 · answered Apr 28 '17 at 06:45

0

@media screen and (min-width: 320px) and (max-width: 480px) {
  //Styles for smaller devices
}

answered Apr 28 '17 at 06:45

athi

1,683
15
26

score 0 · Answer 2 · answered Apr 28 '17 at 06:45

0

Just use

@media (max-width:480px){
  .container{
      display:none;
   }
}

answered Apr 28 '17 at 06:45

Zaid Bin Khalid

748
8
25

score 0 · Answer 3 · answered Apr 28 '17 at 06:47

0

It's not visible because this:

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {

  .container {
    display: none;
  }

}

Either remove it or workarround it.

answered Apr 28 '17 at 06:47

manelescuer

827
1
9
19

score 0 · Answer 4 · edited May 23 '17 at 12:34

0

It's important to order your media queries properly. checkout this post

Although it might not be the cause of the blank white screen, I'd start there as it will make debugging your css a lot easier.

edited May 23 '17 at 12:34

Community

1
1

answered Apr 28 '17 at 06:47

nivesnine

169
1
8

Div should hide only on smartphones

4 Answers4