Целевая страница адаптивного продукта FCC - PullRequest
Новая
       5

Целевая страница адаптивного продукта FCC

0 голосов
/ 20 февраля 2019

Я пробовал так много разных способов сделать фоновое изображение и панель навигации отзывчивыми, но я не могу заставить его работать.Ссылка на то, что мне нужна помощь: https://codepen.io/ConnieQ/pen/gqjMMv

@media screen and (max-width: 600px) {


h1{ 
font-size: 10vw;
text-align: center;
/*margin-left: -250px;*/
border-style: solid;
min-width: 20%;
height: 10%;
}

header{
width: 95%;
}
.organic-matcha{
text-align: center;
font-size: 5vw;
border-style: solid;
}
#header-img{
position: relative;
top: 0;
}
.nav-menu{
position: relative;
height: 50vh;
border-style: solid;
display: flex;
}
#header-img{
display: flex;
flex-direction: column;
justify-content: center;
border-style: solid;
 }
.nav-link{
display: block;
margin-top: 75px;
width: 50%;
padding: 3px;
border-style: solid;
display: flex; 
flex-direction: column;
  }

Класс nav-link не двигается так, как я хочу.Я попытался заставить каждый из них отображать: блок (разве это не занимает всю строку?), А также попробовал flex-direction: column, но они просто продолжают быть рядом друг с другом.Я хочу, чтобы панель навигации на странице выглядела так, пока она находится в мобильном телефоне: https://codepen.io/ConnieQ/full/zemErP Я также не могу получить первое фоновое изображение и слова в нем (Match-A-Matcha и Organic Matcha) по центруисправление тоже.

...