Использование @media Queries делает веб -сайт отзывчивым в браузере, но на мобильном телефоне открывается только полная ⇐ Html

[Anonymous]

Я знаю, что этот вопрос был задан ранее, но все предлагаемые ответы не сработали для меня. Я пытаюсь сделать адаптивный веб -сайт, и, хотя он отлично работает в браузере (когда я его изменения размером), когда я открываю веб -сайт на своем мобильном устройстве, я получаю только полную версию настольного компьютера. < /P>

Код: Выделить всё

LaVida Cake




< /code>
Я позаботился о том, чтобы тег  < /code>, как предложено другими ответами, все же я не получаю надлежащую функциональность на мобильном устройстве.
Пожалуйста, потерпите меня, это мой первый веб -сайт, и ваша помощь будет очень оценен.    body {
background-image: url(pexels-photo-132694smaller.jpeg);

background-attachment: fixed;
background-size: cover;
}

/* **********PHONE SCREEN********** */

@media screen and (max-width: 640px){
#leftSide {
display: none;
}

#rightside {
display: none;
}

#emptyLeft {
display: none;
}

#emptyRight {
display: none;
}

.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"logo"
"main"
"footer";
}

#menu {
display: none;
text-align: center;
grid-area: menu;
}

/* #menu ul li{
display: inline;
margin-right: 50px;
font-size: 2em;
font-family: 'Sacramento', cursive;
}
#menu ul li a {
text-decoration: none;
color: #d83444;
}
#menu ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}
#menu ul li a:hover {
font-weight: bold;
} */

#logo {

text-align: center;
grid-area: logo;

}

#logo h1 {
font-family: 'Great Vibes', cursive;
font-size: 3em;
padding: 10px 10%;
color: #d83444;
}

#main {
text-align: center;
grid-area: main;
background-color: rgba(255,255,255,0.5);
padding: 3%;
}

#main h1 {
font-size: 2em;
font-family: 'Great Vibes', cursive;
color: #d83444;
letter-spacing: 7px;

}

#main p {
font-size: 1.8em;
max-width: 800px;
margin: 20px auto;
font-family: 'Sacramento', cursive;
text-align: justify;
color: #d83444;
}

#main p a {
text-decoration: none;
color: #d83444;
}

#main p a:visited {
text-decoration: none;
color: #d83444;
font-weight: normal;
}

#main p a:hover {
font-weight: bold;
}

#footer {
grid-area: footer;
text-align: center;
}

#footer ul li{

display: inline;
margin-right: 50px;
font-size: 1.5em;
font-family: 'Sacramento', cursive;
}

#footer ul li:first-child{
display: none;
}

#footer ul li a {
text-decoration: none;
color: #d83444;
}

#footer ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}

#footer ul li a:hover {
font-weight: bold;
}

}

/* **********TABLET SCREEN********** */

@media screen and (max-width: 959px) and (min-width: 641px){
#leftSide {
display: none;
}

#rightside {
display: none;
}

.container {
display: grid;
grid-template-columns: 0.1fr 1fr 0.1fr;
grid-template-areas:
"emptyLeft menu emptyRight"
"emptyLeft logo emptyRight"
"emptyLeft main emptyRight"
"emptyLeft footer emptyRight";
}

#emptyLeft {
grid-area: emptyLeft;
}

#emptyRight {
grid-area: emptyRight;
}

#menu {
text-align: center;
grid-area: menu;
}

#menu ul li{
display: inline;
margin-right: 50px;
font-size: 2.5em;
font-family: 'Sacramento', cursive;

}

#menu ul li a {
text-decoration: none;
color:  #d83444;
}

#menu ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}

#menu ul li a:hover {
font-weight: bold;
}

#logo {

text-align: center;
grid-area: logo;

}

#logo h1 {
font-family: 'Great Vibes', cursive;
font-size: 5em;
letter-spacing: 7px;
padding: 10% 10%;
color: #d83444;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(250,250,250,0.5);
}

#main {
text-align: center;
grid-area: main;
background-color: rgba(255,255,255,0.5);
padding: 3%;
}

#main h1 {
font-size: 3em;
font-family: 'Great Vibes', cursive;
color: #d83444;
letter-spacing: 7px;

}

#main p {
font-size: 2.5em;
max-width: 800px;
margin: 20px auto;
font-family: 'Sacramento', cursive;
text-align: justify;
color: #d83444;
}

#main p a {
text-decoration: none;
color: #d83444;
}

#main p a:visited {
text-decoration: none;
color: #d83444;
font-weight: normal;
}

#main p a:hover {
font-weight: bold;
}

#footer {
grid-area: footer;
text-align: center;
}

#footer ul li{

display: inline;
margin-right: 50px;
font-size: 2em;
font-family: 'Sacramento', cursive;
}

#footer ul li a {
text-decoration: none;
color: #d83444;
}

#footer ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}

#footer ul li a:hover {
font-weight: bold;
}

}

/* **********FULL SCREEN********** */

@media screen and (min-width: 959px){
.container {
display: grid;
grid-template-columns: repeat(2,minmax(0%,0.5fr)) minmax(300px,4fr) repeat(2,minmax(0%,0.5fr)) ;
grid-template-areas:
"leftSide emptyLeft menu emptyRight rightSide"
"leftSide emptyLeft logo emptyRight rightSide"
"leftSide emptyLeft main emptyRight rightSide"
"leftSide footer footer footer right";

}

#leftSide {
grid-area: leftSide;
}

#leftSide img {
max-width: 100%;
margin-top: 50px;
margin-bottom: 50px;
}

#leftSide img:hover {
transform: scale(1.2);
}

#emptyLeft {
grid-area: emptyLeft;
}

#menu {
text-align: center;
grid-area: menu;
}

#menu ul li{
display: inline;
margin-right: 50px;
font-size: 3.5em;
font-family: 'Sacramento', cursive;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: rgba(255,255,255,0.8);
}

#menu ul li :nth-of-type(3) {
margin-right: 0;

}

#menu ul li a {
text-decoration: none;
color: #d83444;
}

#menu ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}

#menu ul li a:hover {
font-weight: bold;
}

#logo {
text-align: center;
grid-area: logo;

}

#logo h1 {
font-family: 'Great Vibes', cursive;
font-size: 8em;
padding: 10% 10%;
color: #d83444;
letter-spacing: 7px;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: rgba(250,250,250,0.5);
}

#main {
text-align: center;
grid-area: main;
background-color: rgba(255,255,255,0.5);
padding:  3%;
}

#main h1 {
font-size: 4em;
font-family: 'Great Vibes', cursive;
color: #d83444;
letter-spacing: 7px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(250,250,250,0.5);
}

#main p {
font-size: 3.2em;
max-width: 800px;
margin: 50px auto;
font-family: 'Sacramento', cursive;
text-align: justify;
color: #d83444;
}

#main p a {
text-decoration: none;
color: #d83444;
}

#main p a:visited {
text-decoration: none;
color: #d83444;
font-weight: normal;
}

#main p a:hover {
font-weight: bold;
}

hr {
max-width: 800px;
}

#emptyRight {
grid-area: emptyRight;
}

#rightside {
grid-area: rightSide;
}

#rightside img {
max-width: 100%;
margin-top: 50px;
margin-bottom: 50px;
}

#rightside img:hover {
transform: scale(1.2);
}

#footer {
text-align: center;
grid-area: footer;
}

#footer ul li{
display: inline;
margin-right: 50px;
font-size: 2.5em;
font-family: 'Sacramento', cursive;
-webkit-text-stroke-width: 0.3px;
-webkit-text-stroke-color: rgba(255,255,255,0.8);
}

#footer ul li :nth-of-type(3) {
margin-right: 0;
}

#footer ul li a {
text-decoration: none;
color: #d83444;
}

#footer ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}

#footer ul li a:hover {
font-weight: bold;
}
}
< /code>
Обновление 15 марта 2018 г. < /p>
Я упомянул об этом в комментариях, но не в самом органе вопросов. Я использую сетки CSS для макета веб -сайта. Первоначально я думал, что мобильные браузеры не поддерживают сетки CSS, но это не так. Я не уверен, но могут ли это быть так, как написаны мои медиа -запросы? Значение min-width 

и максимальная ширина как-то смешаны? Имеет ли значение то, что вы используете при просмотре в разных точках просмотра?

Подробнее здесь: https://stackoverflow.com/questions/492 ... le-only-th