Search code examples
htmlcssflexboxmedia-queries

(Media Queries) What am I doing wrong with media queries/flex?

I am creating a home page but my div sections are not adjusting or shrinking with the webpage as I shrink it, they just stay put and stay the same size. What am I doing wrong?

I've only been able to get my navigation bar to adjust when screen size gets to 768px.

html {
  background-color: #00;
}

body {
  background-color: #000;
  position: relative;
  top: 0px;
  left: 150px;
  width: 1600px;
  padding: 5px;
  border: 2px solid #000;
  border-radius: 5px;
}

header #header1 {
  position: relative;
  top: 0px;
  height: 500px;
  width: 1700;
  overflow: hidden;
}

#header1>img {
  position: absolute;
  top: -50px;
  left: 300px;
  width: 900px;
}

nav ul {
  list-style: none;
  padding: 0px;
}

nav ul li {
  padding: 10px;
  border: none;
}

nav ul li a {
  color: #F9C001;
  text-decoration: none;
  font-size: 1.3em;
}

nav ul li:hover,
nav ul li:focus {
  text-decoration: underline;
}

#headsearch {
  position: relative;
  top: 17px;
  left: 465px;
  width: 500px;
}

#search {
  width: 200px;
  height: 30px;
  font-size: 18px;
}

#searchbut {
  position: relative;
  top: -3px;
  left: 5px;
  width: 100px;
  height: 37px;
  box-shadow: inset 0px 1px 0px 0px #fff6af;
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  background-color: #ffec64;
  border-radius: 6px;
  border: 1px solid #ffaa22;
  display: inline-block;
  cursor: pointer;
  color: #333333;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffee66;
}

#searchbut:hover {
  background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
  background-color: #ffab23;
}

#searchbut:active {
  position: relative;
  top: 1px;
}

#container1 {
  display: flex;
  justify-content: space-between;
}

#intro {
  text-align: center;
  flex-basis: 100%;
}

#intro>h1 {
  font-size: 80px;
  text-decoration: underline;
  color: #F9C001;
}

#intro>p {
  font-size: 30px;
}

h1 {
  color: #F9C001;
  font-size: 40px;
}

p {
  color: #FFF;
  font-size: 20px;
}

#container2 {
  display: flex;
}

#content1 {
  position: relative;
  top: 0px;
  left: 100px;
  width: 800px;
  height: 580px;
  flex: 1;
  order: 1;
}

#content1>img {
  width: 798px;
}

#content2 {
  position: relative;
  top: 200px;
  left: 0px;
  width: 600px;
  height: 200px;
  text-align: center;
  flex: 1;
  order: 2;
}

#maleshop {
  position: relative;
  top: 10px;
  box-shadow: inset 0px 1px 0px 0px #fff6af;
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  background-color: #ffec64;
  border-radius: 6px;
  border: 1px solid #ffaa22;
  display: inline-block;
  cursor: pointer;
  color: #333333;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffee66;
}

#maleshop:hover {
  background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
  background-color: #ffab23;
}

#maleshop:active {
  position: relative;
  top: 1px;
}

#container3 {
  display: flex;
}

#content3 {
  /*        position: relative;
            top: -222px;
            left: 750px;*/
  /*width: 800px;
            height: 533px;*/
  flex: 1;
  order: 2;
}

#content3>img {
  width: 798px;
}

#content4 {
  position: relative;
  top: 150px;
  left: 50px;
  width: 600px;
  height: 200px;
  text-align: center;
  flex: 1;
  order: 1;
}

#femaleshop {
  box-shadow: inset 0px 1px 0px 0px #fff6af;
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  background-color: #ffec64;
  border-radius: 6px;
  border: 1px solid #ffaa22;
  display: inline-block;
  cursor: pointer;
  color: #333333;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffee66;
}

#femaleshop:hover {
  background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
  background-color: #ffab23;
}

#femaleshop:active {
  position: relative;
  top: 1px;
}

#container4 {
  display: flex;
}

#content5 {
  position: relative;
  top: 0px;
  left: 100px;
  width: 798px;
  height: 602px;
  flex: 1;
  order: 1;
}

#content5>img {
  /*position: relative;
        top: 0px;
        left: 100px;*/
  width: 600px;
}

#content6 {
  position: relative;
  top: 200px;
  left: -90px;
  width: 600px;
  height: 200px;
  text-align: center;
  border: 1px solid #000;
  flex: 1;
  order: 2;
}

#plantshop {
  box-shadow: inset 0px 1px 0px 0px #fff6af;
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  background-color: #ffec64;
  border-radius: 6px;
  border: 1px solid #ffaa22;
  display: inline-block;
  cursor: pointer;
  color: #333333;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffee66;
}

#plantshop:hover {
  background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
  background-color: #ffab23;
}

#plantshop:active {
  position: relative;
  top: 1px;
}

footer {
  position: relative;
  top: 50px;
  text-align: center;
}

#footerlinks ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#footer1 {
  position: relative;
  top: 0px;
  left: ;
  width: ;
  height: ;
  padding: 10px;
}

#footer1>p {
  font-size: 15px;
}

@media(min-width: 768px) {
  nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  nav ul li:hover,
  nav ul li a:focus {
    background-color: #000;
    text-decoration: underline;
  }
}

#container1 {
  display: flex;
  justify-content: space-between;
}
<header>
  <div id="header1">
    <img src="cover1.jpg" alt="header">
  </div>
</header>
<div id="navigation">
  <div id="navi">
    <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PRODUCT</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">F.A.Q</a></li>
      </ul>
    </nav>
  </div>
  <div id="headsearch">
    <input id="search" name="search" type="text"><button id="searchbut">Search</button>
  </div>
</div>
<section>
  <div id="container1">
    <div id="intro">
      <h1>Welcome to Betta Emporium!</h1>
      <p>With 10+ years of experience in the industry we aim to provide quality Bettas and Plants throughout Canada!
        <br>
        <br> Make your first purchase today and receive a coupon of 15% off your next purchase!
        <br>
        <br> Free shipping for orders $150+ (before taxes)</p>
    </div>
  </div>
  <div id="container2">
    <div id="content1">
      <img src="male.jpg" alt="male">
    </div>
    <div id="content2">
      <h1>Variety of Males Available!</h1>


    </div>
  </div>
  <div id="container3">
    <div id="content3">
      <img src="female.jpg" alt="female">
    </div>
    <div id="content4">
      <h1>Check out our Selection of Females!</h1>
      <p>So many to choose from, you'll want more than one!</p>
      <br>
      <button id="femaleshop">Shop Now!</button>
    </div>
  </div>
  <div id="container4">
    <div id="content5">
      <img src="java-fern-594933.png" alt="java-fern">
    </div>
    <div id="content6">
      <h1>Plants!</h1>
      <p>Plants for beginners to those with green thumbs, see what we have in store for you!</p>
      <br>
      <button id="plantshop">Shop Now!</button>
    </div>
  </div>
</section>
<footer>
  <div id="footerlinks">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">F.A.Q</a></li>
    </ul>
  </div>
  <div id="footer1">
    <p>Copyright © 2023 Betta Emporium
      <br>
    </p>
  </div>
</footer>

I tried different of variations with flex properties like justify-content, flex-basis, align-items, flex-direction: column and few others. I'm guessing I'm not applying something right but I am having a hard time figuring out what is the proper way of coding it together`

Solution

  • Because you hardcode elements' width by px. For example: body{width: 1600px;}, #header1>img{width: 900px;}...

    Try % instead of px.

    Take the CSS of the <body> as an example. If screen width smaller than 1600px, body will be 100%, if screen larger than 1600px, body will be 1600px.

    body {
  width: min(1600px, 100%);
  margin-left: auto;
  margin-right: auto;
}