Мой CSS код неправильно настроен для медиа-запросов? - PullRequest
Новая
       13

Мой CSS код неправильно настроен для медиа-запросов?

0 голосов
/ 14 апреля 2020

Хорошо, так что сначала я прошу прощения, если мой заголовок не очень ясен! Я довольно новичок в css и в настоящее время следую за проектом целевой страницы с freecodecamp, я нахожусь в точке, где я хотел начать добавлять медиа-запросы к своему коду (возможно, следовало бы добавить их по мере продвижения). Я использую этот пример кода в качестве ссылки, чтобы увидеть, что я должен делать, но просто кажется, что независимо от того, какие медиа-запросы я добавляю, страница не отвечает так, как я ожидаю, или просто портит всю css code!

Вот ссылка на мой кодовый блок - https://codepen.io/rorymx/pen/XWmbbzY, и это некоторые из html и css из него. 

<div id="wrapper">
  <header id="header">
    <div id="img-div">
      <img id="header-img" src="https://i.pinimg.com/236x/2d/50/8b/2d508b7019bf7b8711673825c7bd3252.jpg">
    </div>

    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#features">Features</a> </li>
        <li><a class="nav-link" href="#how-it-works">How it works</a> </li>
        <li><a class="nav-link" href="#pricing">Pricing</a> </li>
      </ul>
    </nav>

  </header>
</div>

пожалуйста, не обращайте внимания на то, что он выглядит просто временным, поскольку код в основном то, с чем я играю.

Например. один из медиазапросов, которые я пытался добавить, был 

@media (max-width: 650px) header{flex-wrap: wrap;}

к заголовку 

@media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
}

, который я получил из примера кода, с которым я поиграл, но он просто казался испортить все!

Если кто-то может пролить свет на то, почему это может происходить, или если я не настроил некоторые вещи должным образом, или если код просто завершен, rubbi sh и требует повторного запуска !

1 Ответ

0 голосов
/ 14 апреля 2020

Я не вижу медиазапрос в примере кода, который вы предоставили по предоставленной вами ссылке Codepen (https://codepen.io/rorymx/pen/XWmbbzY). Итак, вопрос кажется немного неясным.

Тем не менее, из-за того, как выглядит код, который вы включили в свое описание выше в дополнение к контексту, который вы предоставили из кода, который вы включили из своего Ссылка Codepen ... это может быть что-то столь же простое, как способ выбора элемента nav, но я не могу сказать это окончательно с предоставленной информацией.

Однако я скажу, что что если я добавлю следующий код в конец таблицы стилей, которую вы предоставили из Codepen, он прекрасно работает! Вот что я написал: 

body{
  margin: 0px;
  padding: 0px;
  backgroun-color: 
}

#wrapper{
  display: flex;
  height: 100vh;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

#header{
  width: 100%;
  height: 100px;
  background-color: grey;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#img-div{
  display: flex;
  position: relative;
  background-color: grey;
  width: 50%;
  height: 100%;  
}


#header-img{
  display: flex;
  position: relative;
  height: 100%;
  left: 25%;
}

#nav-bar > ul{
  display: flex;
  justify-content: space-around;
  float: right;
  flex-direction: row;
  width: 30vw;
  list-style: none;
  font-size: 20px;
}

#body{
  flex: 1;
  display: block;
  background-color: #B2B2B2;
  padding-top: 100px;
  width: 100vw;
}

#title{
  text-align: center;
}

#submit-sec{
  margin: 10px;
  display:flex;
  justfy-content: center;
  flex-directon: column;
  text-align: center;
  align-items: center;
  height: 100px;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto; 
}

#email{
  width: 25vw;
  height: 10vh;
  font-size: 18px;
}

#submit{
 background-color: yellow;
 font-size: 20px;
 font-weight: bold;
 padding: 5px 15px;
 border-radius: 5px;
 width: 50%;
 margin: 10px 0px;
}

#submit:hover{
  background-color: #C4C100 ;
  transition: background-color 0.5s;
  cursor: pointer;
}

#features{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0px;
  padding: 2px;
  width: 100vw;
  align-items: center;
}

 .feature-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    width: 60vw;  
    margin: 15px 0px;
  }

.feature-div > h2{
  margin: 2px 0px;
}

.feature-div > p{
  font-size: 17px;
  margin: 2px 0px;
}

#how-it-works{
  display: flex;
  justify-content: center;
  margin: 20px 0px;
}

iframe{
  max-width: 540px;
  width: 100vw;
}

#pricing{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 10px 0px;
}

.price-sec{
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 width: calc(100% / 3);
 border: 2px solid #000000;
 margin: 50px;
 padding: 0px;
 border-radius: 4px;
 background-color: #FBEDA6;
}

.price-sec > .price-head{
  font-size: 20px;
  font-weight: bold;
  background-color: #E8E8E8;
  width: 100%;
  text-transform: uppercase;
  padding: 10px 0px;
}

.price-sec > ol{
  padding: 0px;
}

ol > li{
  font-size: 20px;
  list-style: none;
  padding: 2px;
}

.price-sec > button{
  border: 0;
  margin: 10px;
  font-weight: 400;
  font-size: 20px;
  padding: 5px 10px;
  background-color: #FD0008;
  color: white;
}

.price-sec > button:hover{
  background-color: #971B1B;
  transition: background-color 0.5s;
  cursor: pointer;
}

#footer{
  background-color: grey;
  margin-top: 0px;
  padding: 2px;
}

#footer > ul{
  display: flex;
  justify-content: flex-end;
  margin: 5px;
}

#footer > ul > li{
  margin: 0px 5px;
  padding: 0px 10px;
  list-style: none;
}

#footer > span{
  display: flex;
  justify-content: flex-end;
  margin: 5px;
  padding: 0px;
}


@media (max-width: 600px) {
  nav {
    background-color: red;
  }
}

Добавление моего тестового кода, кажется, работает нормально с технической точки зрения, поскольку часть элемента nav меняет свой цвет фона с прозрачного на красный, когда я уменьшаю окно меньше, чем ширина 600px, что отражено в медиа-запросе, который я написал. Что касается предоставленного вами кода, я смог также успешно добавить этот код следующим образом: 

body{
  margin: 0px;
  padding: 0px;
  backgroun-color: 
}

#wrapper{
  display: flex;
  height: 100vh;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

#header{
  width: 100%;
  height: 100px;
  background-color: grey;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#img-div{
  display: flex;
  position: relative;
  background-color: grey;
  width: 50%;
  height: 100%;  
}


#header-img{
  display: flex;
  position: relative;
  height: 100%;
  left: 25%;
}

#nav-bar > ul{
  display: flex;
  justify-content: space-around;
  float: right;
  flex-direction: row;
  width: 30vw;
  list-style: none;
  font-size: 20px;
}

#body{
  flex: 1;
  display: block;
  background-color: #B2B2B2;
  padding-top: 100px;
  width: 100vw;
}

#title{
  text-align: center;
}

#submit-sec{
  margin: 10px;
  display:flex;
  justfy-content: center;
  flex-directon: column;
  text-align: center;
  align-items: center;
  height: 100px;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto; 
}

#email{
  width: 25vw;
  height: 10vh;
  font-size: 18px;
}

#submit{
 background-color: yellow;
 font-size: 20px;
 font-weight: bold;
 padding: 5px 15px;
 border-radius: 5px;
 width: 50%;
 margin: 10px 0px;
}

#submit:hover{
  background-color: #C4C100 ;
  transition: background-color 0.5s;
  cursor: pointer;
}

#features{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0px;
  padding: 2px;
  width: 100vw;
  align-items: center;
}

 .feature-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    width: 60vw;  
    margin: 15px 0px;
  }

.feature-div > h2{
  margin: 2px 0px;
}

.feature-div > p{
  font-size: 17px;
  margin: 2px 0px;
}

#how-it-works{
  display: flex;
  justify-content: center;
  margin: 20px 0px;
}

iframe{
  max-width: 540px;
  width: 100vw;
}

#pricing{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 10px 0px;
}

.price-sec{
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 width: calc(100% / 3);
 border: 2px solid #000000;
 margin: 50px;
 padding: 0px;
 border-radius: 4px;
 background-color: #FBEDA6;
}

.price-sec > .price-head{
  font-size: 20px;
  font-weight: bold;
  background-color: #E8E8E8;
  width: 100%;
  text-transform: uppercase;
  padding: 10px 0px;
}

.price-sec > ol{
  padding: 0px;
}

ol > li{
  font-size: 20px;
  list-style: none;
  padding: 2px;
}

.price-sec > button{
  border: 0;
  margin: 10px;
  font-weight: 400;
  font-size: 20px;
  padding: 5px 10px;
  background-color: #FD0008;
  color: white;
}

.price-sec > button:hover{
  background-color: #971B1B;
  transition: background-color 0.5s;
  cursor: pointer;
}

#footer{
  background-color: grey;
  margin-top: 0px;
  padding: 2px;
}

#footer > ul{
  display: flex;
  justify-content: flex-end;
  margin: 5px;
}

#footer > ul > li{
  margin: 0px 5px;
  padding: 0px 10px;
  list-style: none;
}

#footer > span{
  display: flex;
  justify-content: flex-end;
  margin: 5px;
  padding: 0px;
}


@media (max-width: 650px) {
  nav {
    background-color: red;
  }

  header {
    flex-wrap: wrap;
  }

  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
}

Если вы добавите этот код в свою таблицу стилей в предоставленном вами коде, вы увидим, что код на самом деле работает так, как он написан. Однако то, чего вы хотите достичь sh, может оказаться не тем решением, которое вы ищете. Получив немного больше советов о том, каков будет конечный результат, которого вы достигнете sh, я с удовольствием продолжу помогать и помогать, где могу.

Попробуйте это: 

@media (max-width: 650px) {
    #nav-bar > ul {
        flex-direction: column;
    }
}
...