मुझे लगता है कि समस्या उस तरह से है जिस तरह से मैंने "कंटेनर" तत्व बनाया है, यह मेनू को नेवबार में कॉलम में विस्तारित नहीं होने देता है। मैंने हर ऊंचाई तत्व को हटाने की कोशिश की, यहां तक ​​​​कि पूरे कंटेनर पर भी टिप्पणी की, फिर भी कुछ भी नहीं।

मैं मीडिया क्वेरी में "मेनू" वर्ग को फ्लेक्स-दिशा में बदलना चाहता हूं: कॉलम

@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
* {
  margin: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  color: #070707;
}

main {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.nav-bar {
  display: flex;
  justify-content: space-around;
  max-width: 1200px;
  margin: auto;
  position: relative;
  align-items: center;
  margin-top: 1.5rem;
  height: 100%;
}

.menu>a:hover {
  font-size: 1.5rem;
}

.card-h1 {
  display: flex;
  justify-content: center;
}

.menu,
.logo {
  font-weight: 500;
  font-size: 1.4rem;
  font-family: "Abril Fatface", cursive;
}


/* .logo {
  font-size: 1.5rem;
} */

.menu {
  width: 25vh;
  display: flex;
  justify-content: space-between;
}


/* Hamburger menu */

.menu-button {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.menu-button .bar {
  height: 3px;
  width: 100%;
  background-color: #070707;
  border-radius: 10px;
}


/* Main Container */

.container {
  display: flex;
  height: 60vh;
  width: 1200px;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}

.section1,
.section2,
.section3 {
  margin: 20px;
  width: 33.3333%;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  /* Layered Box Shadow */
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12); */
}

h1,
p {
  font-family: "PT Serif", serif;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 0.8rem;
  padding: 30px;
}

.footer {
  height: 5vh;
  display: flex;
  justify-content: center;
}

.copywright {
  padding: 20px;
  font-weight: 400;
  font-size: 0.6rem;
}

@media (max-width: 640px) {
  .nav-bar {
    width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .menu-button {
    display: flex;
  }
  .menu {
    display: flex;
    /* display: none; */
  }
  .menu>a {
    display: flex;
    flex-direction: column;
  }
  .footer {
    position: absolute;
    bottom: 1rem;
    right: 30%;
    display: flex;
  }
  .container {
    display: flex;
    flex-direction: column;
    width: 80vw;
    margin: auto;
  }
  .section1,
  .section2,
  .section3 {
    width: 80vw;
    padding: 0;
    margin: 0.5rem;
  }
}
<body>
  <header>
    <div class="nav-bar">
      <div class="logo">
        <a href="index.html">andyprv.dev</a>
      </div>
      <a href="#" class="menu-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="menu">
        <a href="https://github.com/andreiprv" target="blank">my.work</a>
        <a href="">contact.me</a>
      </div>
    </div>
  </header>

  <main>
    <div class="container">
      <div class="section1">
        <div class="card-h1">
          <h1 class="title1">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>

      <div class="section2">
        <div class="card-h1">
          <h1 class="title2">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>

      <div class="section3">
        <div class="card-h1">
          <h1 class="title3">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>
    </div>
  </main>
  <div class="footer">
    <div class="footer-last">
      <p class="copywright">Created by Andrei Ionescu 2020</p>
    </div>
  </div>
</body>

आपका अग्रिम में ही बहुत धन्यवाद!

1
quze 9 अक्टूबर 2020, 21:15

1 उत्तर

सबसे बढ़िया उत्तर

अगर मैं सही ढंग से समझता हूं कि मीडिया क्वेरी शैलियां सक्रिय होने पर आप अपने मेनू आइटम लंबवत चाहते हैं।

मुझे लगता है कि आपकी समस्या यह थी कि आप मेनू आइटम (.menu a) पर flex-direction: column सेट कर रहे थे, न कि मेनू पर:

.menu {
  display: flex;
  flex-direction: column;
}

यहां एक उदाहरण स्निपेट है, इसे पूर्ण स्क्रीन में चलाएं और व्यवहार का परीक्षण करने के लिए विंडो का आकार समायोजित करें:

@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
* {
  margin: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  color: #070707;
}

main {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.nav-bar {
  display: flex;
  justify-content: space-around;
  max-width: 1200px;
  margin: auto;
  position: relative;
  align-items: center;
  margin-top: 1.5rem;
  height: 100%;
}

.menu>a:hover {
  font-size: 1.5rem;
}

.card-h1 {
  display: flex;
  justify-content: center;
}

.menu,
.logo {
  font-weight: 500;
  font-size: 1.4rem;
  font-family: "Abril Fatface", cursive;
}


/* .logo {
  font-size: 1.5rem;
} */

.menu {
  width: 25vh;
  display: flex;
  justify-content: space-between;
}


/* Hamburger menu */

.menu-button {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.menu-button .bar {
  height: 3px;
  width: 100%;
  background-color: #070707;
  border-radius: 10px;
}


/* Main Container */

.container {
  display: flex;
  height: 60vh;
  width: 1200px;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}

.section1,
.section2,
.section3 {
  margin: 20px;
  width: 33.3333%;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  /* Layered Box Shadow */
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12); */
}

h1,
p {
  font-family: "PT Serif", serif;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 0.8rem;
  padding: 30px;
}

.footer {
  height: 5vh;
  display: flex;
  justify-content: center;
}

.copywright {
  padding: 20px;
  font-weight: 400;
  font-size: 0.6rem;
}

@media (max-width: 640px) {
  .nav-bar {
    width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .menu-button {
    display: flex;
  }
  .menu {
    display: flex;
    flex-direction: column;
    /* display: none; */
  }
  .menu>a {
    display: flex;
  }
  .footer {
    position: absolute;
    bottom: 1rem;
    right: 30%;
    display: flex;
  }
  .container {
    display: flex;
    flex-direction: column;
    width: 80vw;
    margin: auto;
  }
  .section1,
  .section2,
  .section3 {
    width: 80vw;
    padding: 0;
    margin: 0.5rem;
  }
}
<body>
  <header>
    <div class="nav-bar">
      <div class="logo">
        <a href="index.html">andyprv.dev</a>
      </div>
      <a href="#" class="menu-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="menu">
        <a href="https://github.com/andreiprv" target="blank">my.work</a>
        <a href="">contact.me</a>
      </div>
    </div>
  </header>

  <main>
    <div class="container">
      <div class="section1">
        <div class="card-h1">
          <h1 class="title1">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>

      <div class="section2">
        <div class="card-h1">
          <h1 class="title2">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>

      <div class="section3">
        <div class="card-h1">
          <h1 class="title3">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>
    </div>
  </main>
  <div class="footer">
    <div class="footer-last">
      <p class="copywright">Created by Andrei Ionescu 2020</p>
    </div>
  </div>
</body>
0
Eddie Reeder 9 अक्टूबर 2020, 21:26