CODEWITHSUNDEEP
htmlcsssassresponsive-designmedia-queries
alie
alie

Reputation: 11

Media query not working - hide a div on mobile

I am building a simple single web page where I want to hide a div on mobile as following .rectangle-laptop to display none on mobile and have a background image cover up the whole screen on mobile instead while it is on a mobile size, but at the moment, the media query doesn't seem to work, can you help?

    .dot {
        height: 200px;
        width: 200px;
        background-color: lightgrey;
        border-radius: 50%;
        display: inline-block;
        margin-bottom: -5rem;
        box-shadow: 0px 0px 5px #80808059;

  }


/* @media (min-width: 767px) {
  .rectangle-small {
    display: none !important;
  }
}*/
 .mobile-banner {
   background-size: cover;
  background-position: center;
  padding: 150px 0;
  background-image: url(https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg);
 }

     .rectangle-laptop {
          height: 200px;
          width: 850px;
          background-color: #555;
          display: inline-block;

        background-position: center;
      transition: all 0.5s ease;
             background-image: url(https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg);

      }


      .rectangle:hover{transform: scale(1.2);}
      .rectangle img {
        max-height: 200px;
        max-width: 850px;

      }

      .container {margin-top: 5%;}
      .rectangle-vertical-1 {
        height: 180px;
        width: 120px;
        background-color: lightgrey;
        display: inline-block;
        margin:6%;
        box-shadow: 5px 5px 5px #80808082;
      }
      .rectangle-vertical-2 {
        height: 180px;
        width: 120px;
        background-color: #a3a3a3;
        display: inline-block;
        margin:6%;
        box-shadow: 5px 5px 5px #80808082;
      }
      .rectangle-vertical-3 {
        height: 180px;
        width: 120px;
        background-color: #4d4c4c;
        display: inline-block;
        margin:6%;
        box-shadow: 5px 5px 5px #80808082;
      }

.rectangle-vertical-container {position: relative;margin-top: -9rem;"}

@media (max-width: 767px) {
  .rectangle-laptop{
    display: none !important;
    visibility: hidden;
  }
}
<div class="container">

        <div class="mobile-banner" style="position: relative;">

        <div style="text-align:center">
          <div  class="dot" ><h4>Melrose</h4><p>this sleek slab-styled kitchen allows you to mix and match both colour and texture.</p></div>
             <div>

                <div style="text-align:center">


                  <div class="rectangle-laptop" >
                   </div>
              <div class = "rectangle-vertical-container" >
                <span class="rectangle-vertical-1" ></span>
                <span class="rectangle-vertical-2"></span>
                <span class="rectangle-vertical-3"></span>
              </div>
            </div>
            </div>



            </div>

Upvotes: 0

Views: 665

Answers (3)

M.K
M.K

Reputation: 270

it's @media only screen and (max-width: 767px){} and there's a typo on this line:

.rectangle-vertical-container {position: relative;margin-top: -9rem;"}

remove the double quote before your closing }

Upvotes: 0

Khalid Khan
Khalid Khan

Reputation: 3185

Place your media query at the bottom of regular css and use this media query for mobile devices

@media only screen and (max-width: 768px) {
  .rectangle-laptop{
     display: none !important;
   }
}

Upvotes: 0

Johannes
Johannes

Reputation: 67748

media queries should be put after the regular CSS rules, otherwise they will be overwritten by the regular rules (which apply to all sizes), like in your case.

Upvotes: 3

Related Questions