Responsive design issue: Media queries ignoring max-width

Question

AIM

For screen sizes with a width smaller than 600px, I would like the content of my page to adjust to the screen.

PROBLEM

When using pre-set screen sizes in the responsive tool in Chrome for let's say iPhone X media queries don't seem to be applied as the content does not adjust. When manually using the responsive tool, i.e. by minimizing/expanding the responsive screen media-queries still do not work.

On Firefox the same happens when selecting a pre-set screen size. However, when manually changing the screen size of the responsive tool media queries do work as the content size is adjusted to the screen.

When testing my actual website on my phone (iPhone 7 Plus) once again, media queries do not work as the content is not adjusted.

In my actual project, I am using SCSS as a preprocessor and use mixins for media queries. The responsiveness of the website works on every page but the sign-in page. I made a simple version of it to use in this question with CSS only.

ATTEMPT

body {
  margin: 0;
  padding: 0;
}

html {
  /* 10px/16px = 62.5% -> 1rem = 10px */
  font-size: 62.5%;
}

/* phone screen breakpoint */
@media (max-width: 600px) {
  html {
    /* 1 rem = 7px, 7/16 = 43.75% */
    font-size: 43.75%;
  }
}

.container {
  background: black;

  margin: 0 auto;
  width: 100vw;
  height: 100vh;
}

.wrapper {
  max-width: 35rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  right: 50%;
  bottom: 50%;
  transform: translate(50%,50%);
  position: absolute;
  padding: 5rem;
}

.wrapper h1 {
  color: black;
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  padding-bottom: 2rem;
}

.wrapper form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wrapper form input {
  width: 100%
  padding: .5rem;
  margin-bottom: 1rem;
}

.footer {
  position: absolute;
  bottom: 0;

  float: left;
  width: 100%;

  display: flex;
  justify-content: space-between;
}

.footer ul {
  float: left;
  margin-top: .5rem;
  width: 70vw;
}

.footer li {
  display: inline-block;
  border-right: .1rem solid white;
  padding: 0 1rem;
  margin-bottom: .5rem;
}

.footer li:last-child {
  border-right: none;
}

.footer li a {
  display: inline-block;
  color: white;
  font-size: 1rem;
  font-weight: 500;
}

<div class="container">

    <div class="wrapper">
      <h1>SIGN IN HERE</h1>
      <form>
        <input type="text" placeholder="E-mail">
        <input type="text" placeholder="Password">
        <button>Sign In</button>
      </form>
    </div>

    <div class="footer">
      <div>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Terms</a></li>
          <li><a href="#">Policy</a></li>
        </ul>
      </div>
    </div>

  </div>

Do you have `` in your header? – Huangism Feb 03 '20 at 15:43 — Huangism, Feb 03 '20 at 15:43

score 1 · Answer 1 · answered Feb 03 '20 at 15:54

You're missing a semicolon which is causing your inputs to not resize:

.wrapper form input {
  width: 100%  /* <- Should have a semicolon here */
  padding: .5rem;
  margin-bottom: 1rem;
}

Additionally, your media query is working, however the font-size of <input> and other form elements is tricky because they don't inherit font-size by default (or other font properties). That answer recommends something like:

input, select, textarea, button { font-family: inherit }

However you can specify these for your form elements individually if you like.

Oppsie. Thank you. However, the suggestion in the comment above solved the problem. Now all the fonts and everything else is delivering what I was expecting, i.e. adjusting its size according to the screen. — Joehat, Feb 03 '20 at 16:03

Responsive design issue: Media queries ignoring max-width

1 Answers1