(SCSS) Мои медиазапросы некорректно работают с display: flex;

Question

Я работаю с SCSS, пытаясь создать адаптивный сайт.Я использую Koala для компиляции своего кода, и у меня есть файл styles.scss, который импортирует мои другие частичные таблицы стилей.Некоторые стили работают на моем сайте динамически при изменении ширины, но с моим дисплеем: flex;вещи не меняются так, как я хочу.

Я пытался изменить медиазапросы, чтобы они вложились в себя, но ничего не работает должным образом.

styles.scss

@import "reset";

@import "variables";

// @media only screen and (min-width: 1em) {
@import "small-default";
// }

//35em is also 560px (if basefont is 16px)
@media only screen and (min-width: 560px) {
@import "medium";
}

//64em is also 1028px (if basefont is 16px)
@media only screen and (min-width: 1028px) {
@import "large";
} 

index.html

<div class="footer">
        <footer>
          <div class="info">
              <div class="contact">
                <h2>Contact Us</h2>
                <p>CABOT CRUIZES</p>
                <p>23 South Main St. Suite 16</p>
                <p>Lexington, VA 24450</p>

                <br>
                <h2>Phone:</h2>
                <p>1-800-555-1234</p>

                <br>

                <h2>Hours of Operation:</h2>
                <p>Monday - Friday 9am - 4pm</p>
              </div>

              <div class="newsletter">
                <h2>News Letter</h2>
                <p>Subscribe to our email list and stay up-to-date with our hottest offers and latest specials.</p>

                <div class="subscribe">
                    <input type="email" name="" id="subscribeEmail">
                    <button type="submit">Subscribe</button>
                </div>
              </div>
            </div>  

              <div class="why">
                <h2>Why Cabot Cruises?</h2>
                <p>Cabot Cruises is a travel agency providing the best cruise deals on our online travel website. We can help you with all inclusive vacations including discounted cruises.</p>
                <br>
                <p>We do not sell travel to residents of Deleware, Iowa, Florida, Hawaii and Washington state because those states are just wierd. If you are a resident of one of these states, call your congressman and tell them to change the regulations. </p>
              </div>


        </footer>
      </div>

_small-default.scss

.footer {
  background-color: $secondaryColor;

  footer {
    max-width: 1024px;
    margin: 0 $gutter;
    padding: 1rem 0;
    color: $thirdColor;


    .info {
      margin: 0 auto;
      color: $thirdColor;

      display: flex;
      flex-direction: column;




      .contact, .newsletter, .why {
        padding: .5rem 0;
      }

      .contact {
      }

      .newsletter {
        display: flex;
        flex-direction: column;
        justify-content: center;


        .subscribe {
          display: flex;
          flex-direction: column;
          justify-content: center;

          input{
            height: 35px;
            margin-bottom: .2rem;
          }

          button {
            height: 44px;
            background-color: #666;
            border-radius: 10px;
            color: #fff;
          }
        }
      }

      .why {
      }



      h2{
        margin-bottom: .75rem;
      }
      input {
        margin-top: .6rem;
      }
    }


  }
}

_medium.scss (I 'Я просто пытаюсь сделать простое изменение направления в макете, но ничего не получается.)

footer {

    .info {
        flex-direction: row;
    }
}

Answer 1

будет

.footer {
  footer {
     .info {
        flex-direction: row;
    }
  }
}

или

.footer footer .info {
    flex-direction: row;
}

если вы хотите назвать его так же, как в своей среде .scss