Search code examples
htmlcssmedia-queriesgoogle-chrome-devtools

Why @media min/max width to control font-size works when manually resizing the screen but not in mobile mode?

I have a simple HTML layout and I want to set the font-size based on CSS media queries. For screen sizes less than 767 I want font-size 24px and for screen size greater than or equal 768 I want font-size 28px. However when I go into mobile mode in Chrome (Version 75.0.3770.142 (Official Build) (64-bit)) the font-size still stays at 28px. Interestingly though if I'm in desktop mode and I just drag the right side of the browser window in the left direction (decreasing window width manually) the font-size does change to 24 px when the screen is less than 768px.

I don't know if my problem is because of incorrect query, or some Chrome quirk that I'm not aware of.

This is my CSS:

html {
    box-sizing: border-box;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
}

.container {
    margin-top: 1.6%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

hr {
    margin-top: 1.6%;
    width: 100%;
    border: solid 1px #eeeeee;
}

.under-maintenance {
    margin-top: 2.3%;
    font-family: Helvetica;
    color: #333333;
    text-align: center;
    font-weight: bold;
}

.back-soon {
    margin-top: 1.4%;
    margin-bottom: 52px;
    font-family: Helvetica;
    font-size: 24px;
    font-weight: 300;
    color: #333333;
}

@media (max-width: 767px) {
    .under-maintenance {
        font-size: 24px;
    }
}

@media (min-width: 768px) {
    .under-maintenance {
        font-size: 28px;
    }
}

and this is my html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./error-page-500.css">
</head>
<body>

<div class="container">
    <img src="./images/logo.svg" alt="logo">
    <hr/>
    <span class="under-maintenance">UNDER MAINTENANCE</span>
    <span class="back-soon">We will be back soon</span>
    <img src="./images/man.png" alt="man">
</div>

</body>
</html>
Solution

  • You need to add below meta tag in your html inside <head> tag:

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

    Here is the updated fiddle: 

    html {
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

.container {
  margin-top: 1.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

hr {
  margin-top: 1.6%;
  width: 100%;
  border: solid 1px #eeeeee;
}

.under-maintenance {
  margin-top: 2.3%;
  font-family: Helvetica;
  color: #333333;
  text-align: center;
  font-weight: bold;
}

.back-soon {
  margin-top: 1.4%;
  margin-bottom: 52px;
  font-family: Helvetica;
  font-size: 24px;
  font-weight: 300;
  color: #333333;
}

@media (max-width: 767px) {
  .under-maintenance {
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .under-maintenance {
    font-size: 28px;
  }
}
    <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="./error-page-500.css">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>

  <div class="container">
    <img src="./images/logo.svg" alt="logo">
    <hr/>
    <span class="under-maintenance">UNDER MAINTENANCE</span>
    <span class="back-soon">We will be back soon</span>
    <img src="./images/man.png" alt="man">
  </div>

</body>

</html>