Home > Enterprise >  Media Query is not working even after adding viewport meta tag
Media Query is not working even after adding viewport meta tag

Time：05-31

When I insert the media queries, they work in the Firefox inspector but not in the actual mobile. When I open it from mobile the media queries are ignored completely.

I already read many of the previous questions, however even if I placed the viewport correctly, they still don't work.

Here is my code:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.media-mobile-vertical,
.mobile-container {
  display: none;
}
div {
  display: grid;
}
body {
  background: radial-gradient(at 60% 10%, #22242f 0, #161721 100%);
  color: #fff;
  font-family: Montserrat, sans-serif;
}
.header {
  height: 10vh;
  grid-template-columns: 20% 45% 30%;
}
.header-left {
  justify-items: center;
  align-items: center;
}
.header-logo {
  max-width: 250px;
}
.header-right {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  gap: 25px;
}
.header-right-dropdown-outer {
  min-width: 100px;
  width: 100%;
  position: relative;
}
.header-right-dropdown {
  width: 100%;
  min-width: 100px;
  background-color: #181924;
  border-radius: 0.5rem;
  box-shadow: 3px 3px 0 0 rgb(22 23 33 / 35%);
  padding: 1rem;
  top: 100%;
  white-space: nowrap;
  display: none;
  position: absolute;
  right: 0;
  z-index: 9;
}
.header-right-dropdown-outer:hover .header-right-dropdown {
  display: block;
}
.nobull {
  list-style-type: none;
}
.mid-area {
  height: 80vh;
  grid-template-columns: 1fr 3fr 1fr;
}
.left-sidebar {
  width: 20vw;
  justify-items: center;
  margin-top: 10%;
}
.right-sidebar {
  width: 20vw;
  justify-items: center;
  align-items: center;
}
.mainframe {
  width: 60vw;
  justify-items: center;
  align-items: center;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
  width: 100%;
}
.btn-grey {
  border: 1px solid #1e92e6;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  background: 0 0;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
}
.btn-blank {
  background: 0 0;
  border: 1px solid rgba(96, 125, 139, 0.25);
  color: #fff;
}
.btn-drop-right {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}
.btn-blank-sidebar {
  background: 0 0;
  border: none;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}
.footer {
  height: 10vh;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 11px;
}
.footer-center {
  align-self: center;
  justify-items: center;
}
.footer-right {
  grid-template-columns: 16% 16% 16% 16% 16% 16%;
  align-items: center;
}
.footer-left {
  width: 20vw;
  justify-items: center;
  align-items: center;
}
.widget-container {
  width: 50vw;
  height: 60vh;
  background: rgba(22, 23, 33, 0.75);
  border: 1px solid rgba(96, 125, 139, 0.25);
  border-radius: 1rem;
  box-shadow: 2px 2px 10px 0 rgb(22 23 33 / 35%);
  padding: 1rem 1rem;
  justify-self: center;
  align-self: center;
}

/* MEDIA QUERY MOBILE VERTICAL POSITION */
@media only screen and (max-width: 811px) {
  .grid-container,
  .mobile-container {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .media-mobile-vertical {
    display: grid;
    height: 100vh;
    justify-items: center;
    align-items: end;
    background-color: red;
  }
  .flip-container {
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    align-items: end;
    gap: 9%;
  }
  .media-mob-flip {
    max-width: 25%;
    align-self: end;
  }
  .mobile-mob-title {
    align-self: start;
  }
  .media-mob-logo {
    max-width: 50%;
    align-self: start;
  }
}

/* MEDIA QUERY MOBILE HORIZONTAL POSITION */
@media only screen and (min-width: 812px) and (max-width: 1025px) {
  .grid-container,
  .media-mobile-vertical {
    display: none;
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body {
    background: #181923;
  }
  .mobile-container {
    display: grid;
    max-height: 99vh;
    margin: 1%;
  }
  .mob-header-left {
    justify-items: center;
  }
  .mob-logo {
    max-width: 25%;
  }
  .mobile-footer {
    font-size: 10px;
    display: grid;
    align-self: end;
    align-items: end;
    justify-items: center;
    margin-top: 3%;
  }
  .btn,
  btn-blank-sidebar,
  btn-grey {
    height: 2px;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0"/>-->
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1" /> -->
    <!-- <script src="/../../JS/countdown.js"></script> -->
    <link rel="stylesheet" href="dashboard.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="global0.ico" />
    <title>Dashboard Frame Draft</title>
  </head>
  <body>
    <!-- VERTICAL POSITION PHONE STARTS 1 CONTAINER / 2 ROWS-->
    <div >
      <div >
        <img  src="fl.png" alt="">
        <p >Please flip the device horizontally!</p>
      </div>
      <img  src="global1.png" alt="">
    </div>
    <!-- VERTICAL POSITION PHONE ENDS -->
    <!-- MOBILE VERSION STARTS 1 CONATINER / 3 ROWS-->
    <div >
      <!-- MOBILE HEADER STARTS 1 CONTAINER / 2 ROWS-->
      <div >
        <div >
          <img  src="global1.png" alt="">
        </div>
        <div ></div>
      </div>
      <!-- MOBILE HEADER ENDS -->
      <!-- MOOBILE BODY STARTS 1 CONTAINER / 1 BOX-->
      <div >
        <div >
          <ul >
            <li><a href="#" ><span>Pre-Sale</span></a></li>
            <li><a href="#" ><span>Claim</span></a></li>
            <li><a href="#" ><span>Play</span></a></li>
            <li><a href="#" ><span>Stake</span></a></li>
            <li><a href="#" ><span>Farm</span></a></li>
            <li><a href="#" ><span>Wrap</span></a></li>
            <li><a href="#" ><span>Bridge</span></a></li>
            <li><a href="#" ><span>Calculator</span></a></li>
            <li><a href="#" ><span>Walkthrough Videos</span></a></li>
          </ul>
        </div>
      </div>
      <!-- MOBILE BODY ENDS -->
      <!-- MOBILE FOOTER STARTS 1 CONTAINER / 1 BOX-->
      <div >
        <div >
          <p>© 2022 New Company Sample LLC - All rights reserved.</p>
        </div>
      </div>
      <!-- MOBILE FOOTER ENDS -->
    </div>
    <!-- MOBILE VERSION ENDS -->
    <div >
      <div >
        <div >
          <a href="index.html"><img  src="global1.png" alt="" /></a>
        </div>
        <div ></div>
        <div >
          <div >
            <button ><span>Tools</span></button>
            <div >
              <ul >
                <li><a href="#" ><span>Buy on PancakeSwap</span></a></li>
                <li><a href="#" ><span>Add token to wallet</span></a></li>
                <li><a href="#" ><span>Borrow</span></a></li>
                <li><a href="#" ><span>Wrap</span></a></li>
                <li><a href="#" ><span>Bridge</span></a></li>
                <li><a href="#" ><span>Customize</span></a></li>
                <li><a href="#" ><span>Developer API</span></a></li>
                <li><a href="#" ><span>Walkthrough Videos</span></a></li>
              </ul>
            </div>
          </div>
          <div >
            <button ><span>Connect Wallet</span></button>
            <div >
              <ul >
                <li><a href="#" ><span>Metamask</span></a></li>
                <li><a href="#" ><span>Wallet Connect</span></a></li>
                <li><a href="#" ><span>Binance Wallet</span></a></li>
                <li><a href="#" ><span>Trust Wallet</span></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div >
        <div >
          <ul >
            <li><a href="#" ><span>Pre-Sale</span></a></li>
            <li><a href="#" ><span>Claim</span></a></li>
            <li><a href="#" ><span>Play</span></a></li>
            <li><a href="#" ><span>Stake</span></a></li>
            <li><a href="#" ><span>Farm</span></a></li>
            <li><a href="#" ><span>Wrap</span></a></li>
            <li><a href="#" ><span>Bridge</span></a></li>
            <li><a href="#" ><span>Calculator</span></a></li>
            <li><a href="#" ><span>Walkthrough Videos</span></a></li>
          </ul>
        </div>
        <div >
          <div >
            <!-- WIDGET SUBCONTAINER GOES HER -->
          </div>
        </div>
        <div ></div>
      </div>
      <div >
        <div ></div>
        <div >
          <p>© 2022 New Company Sample LLC - All rights reserved.</p>
        </div>
        <div >
          <div >Litepaper</div>
          <div >Manifest</div>
          <div >Press</div>
          <div >Team</div>
          <div >Carrer</div>
          <div >Contact Us</div>
        </div>
      </div>
    </div>
  </body>
</html>

How do I fix this?

CodePudding user response：

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
  
}

Try using this media query instead.

CodePudding user response：

Add meta tag and remove other part from meta

/*replace your css media query with line */ 
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* here you write ccs*/
  
}

CodePudding user response：

Use this code after the start of the <head> tag

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

CodePudding user response：

It just needed to add the media= into a link tag in the head:

<link media="screen and (max-device-width: 811px)" rel="stylesheet" href="dashboard.css" />

Page link：https//www.codepudding.com/Enterprise/425050.html

Prev:Add and Remove Keyframe on time
Next:Stop all animations on hovering 1 object with the same classes
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding