Bootstrap 4 Grid не изменяйте размеры для экранов телефона ⇐ Html

[Anonymous]

Я делаю страницу с одним файлом .html и одним файлом .css.

Сетка отображается правильно для размеров среднего экрана, но не изменяется, когда я просматриваю на своем телефоне. < /p>

Я использовал Bootstrap 4 Раньше без проблем в моем приложении React, но те же методы, похоже, не работают с простыми HTML и CSS. < /p>

Мой код можно увидеть ниже. < / p>

html: < /p>




Portfolio







NAME

PORTFOLIO
ABOUT
CONTACT
CURRICULUM VITAE
GITHUB PROFILE











< /code>

У меня есть более 12 столбцов в некоторых рядах, но никогда не было с ним ранее, и, как я уже говорил ранее, все работает нормально на средних размерах. < / p>

css: < /p>

nav {
position: fixed;
top: 0px;
z-index: 1;
display: block;
height: 50px;
width: 100%;
background-color: #A65900;
padding-top: 10px;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.68);
}

nav a {
text-decoration: none;
color: white;
padding: 0 0.5em;
display: inline;
}

nav .navLeft {
font-size: 20px;
display: inline;
margin-left: 5rem;
}

nav .navRight {
display: inline;
margin-right: 5rem;
}

.contentPane {
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.68);
}

.nameSection {
width: 100%;
text-align: center;
background-color: #FFA200;
}

.nameSection img {
margin-top: 90px;
max-height: 200px;
width: 100%;
}

.underline {
display: block;
clear: both;
height: 8px;
background-color: white;
border-radius: 5px;
margin-bottom: 5px;
}

.nameSection h4 {
margin-bottom: 40px;
}

.portfolioSection {
text-align: center;
background-color: #FFEF00;
}

.portfolioSection h1 {
margin-top: 40px;
}

.screen {
width: 100%;
max-height: 200px;
}
< /code>

Кто -нибудь может увидеть, что я делаю не так? Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/491 ... ne-screens