Помогите разобраться, почему не работает медиа запрос. Тестил на разных устройствах, результат одинаковый. Не исключаю что ошибка в коде, так как код повзаимствовал.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
html {
font-size: 10px;
display: block;
}
body {
display: block;
margin: 8px;
line-height: 1;
}
.container {
height: 100vh;
min-height: 534px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
background-color: purple;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
.pages {
width: calc(100% - 1rem);
flex-grow: 3;
display: flex;
align-items: center;
justify-content: stretch;
padding: .5rem;
}
header {
width: calc(100% - 1rem);
flex-grow: 3;
display: flex;
align-items: center;
justify-content: stretch;
padding: .5rem;
}
form {
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
height: 70vh;
min-height: 38.2rem;
width: 100%;
padding: 1.5rem 1rem 4rem;
margin-bottom: 3rem;
border-radius: 8px;
background-color: rgba(255,255,255,.85);
}
.pages__text {
flex-grow: 2;
text-align: center;
padding-bottom: 1.1rem;
}
.text_style_regular {
font-size: 1.4rem;
line-height: 1.9rem;
}
.text {
color: rgba(0,0,0,.9);
font-family: open sans,sans-serif;
}
.js-current-page {
display: block;
}
.pages__item {
flex-grow: 3;
}
.pages__item-title {
text-align: center;
}
.text_style_bold {
font-weight: 700;
font-size: 1.5rem;
line-height: 2.2rem;
}
button {
display: block;
box-sizing: border-box;
width: 83vw;
align-self: center;
font-size: 1.4rem;
line-height: 1.8rem;
font-weight: 600;
padding: 1.3rem .5rem;
margin: .8rem auto 0;
}
div{
display: block;
}
.hidden {
display: none;
}
/* @media screen and( max-width: 400px) {
} */
@media (min-width: 480px) and (orientation: portrait)
html {
font-size: 15px;
}
@media (min-width: 425px)
html {
font-size: 12px;
}
@media (min-width: 375px)
html {
font-size: 11px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>КвизТестОпросник</title>
</head>
<body>
<div class="container">
<header></header>
<div class="pages">
<form class="pages_body" action="#" id="submitForm">
<p class="pages__text text text_style_regular">
Крупнейшая сеть знакомств в интернете!
<br> Сейчас на сайте много свободных
<br class="for-mobile"> женщин и мужчин
</p>
<div id="38" class="pages__item js-current-page">
<h2 class="pages__item-title text text_style_bold">
Какой тип отношений
<br class="for-mobile"> Вы ищете?
</h2>
<div id="div1" class="">
<button class="0">Первая кнопка</button>
<button class="1">Вторая кнопка</button>
</div>
<div id="div2" class="hidden">
<button class="2">Третья кнопка</button>
<button class="3">Четвёртая кнопка</button>
</div>
<input type="submit" value="Отправить" class="hidden" id="submit">
</div>
</form>
</div>
</div>
<scri
Вот ещё ссылка на песочницу
https://jsfiddle.net/3z52kdsa/4/ 
