How can change size of my div by media-query?-CodePudding

I'm making my first project,its an restaurant site, and I want make my menu Page like here (https://62bc5048ee1d4.site123.me),but I have troubles with its media-query, i can't make it like it link above when my screen size I lower than 1000px and 768px(especially 1000px),how can I make it?here is my html and css codes:

#part3{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom:100px;
    background-color:white;
}

#S1{
    float:left;
    padding-right:140px;
    padding-left:150px;
}

#S2{
    padding-left:150px;
    float:left;
    padding-right:140px;
}

.menu-h2{
    text-align:center;
}

.menu-box1{
    position:relative;
    left:-130px;
    background-color:#f1f1f1;
    width:175%;
    padding:10px;
    padding-bottom:50px;
    margin-bottom:20px;
}

.menu-img{
    float: left;
    padding: 0 20px 20px 0;
}

.menu-box2{
    position:relative;
    left:-130px;
    background-color:#f1f1f1;
    width:175%;
    padding:10px;
    padding-bottom:50px;
    margin-bottom:20px;
}


   @media all and (max-width:1200px) {
    .topper-header{font-size:240%;}

    #S1{width:100%;padding-right:10px;margin-left:-10px;}
    #S2{width:100%;padding-right:10px;margin-left:-10px;}
    .menu-h2{margin-left:-250px;}


    .blog-image{width:230px; height:150px;}
    .box1 h3{font-size:16px;}
    .box1 p{padding-bottom:0;font-size:15px;}

    #part1 p{font-size:100%;}
    #about-image{width:500px; height:440px;}

    .text-image1{font-size:60px;}
    .text-image2{font-size:25px;}
}

@media all and (max-width:1000px) {
    .topper-header{font-size:170%;width: 100%;}

    #about-image{width:350px; height:420px;}
    #part1 p{font-size:90%;width:25%;height:65%;margin-top:-5px;}

    .box1{width:40%;float: none;}
    .blog-image{width:100%; height:250px;padding-bottom:5px;}
    .box1 li{margin-top:-8px;font-size:15px;}
    .box1:nth-child(odd) {margin-left: 1rem /*or other value*/;}
    #special {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;}

    #part4{padding:50px;}
    #spec-2{flex-direction:column;}
    .contact-info{margin-bottom:40px;}
    .contact-info{width:100%;}
    .contact-form{width:90%;}

    #S1{width:50%;padding-right:10px;margin-left:30px;margin-right:30px;display: flex;flex-direction: column;justify-content: center;}
    #S2{width:50%;padding-right:10px;margin-left:30px;display: flex;flex-direction: column;justify-content: center;}
    .menu-h2{margin-left:0px;}
}

@media all and (max-width:861px) {
    #part1 p{font-size:90%;width:30%;height:65%;margin-top:-5px;}
}

@media all and (max-width:762px) {
    .about-center{flex-direction:column;}
    #part1 p{width:85%;padding-bottom:200px;}
    #about-image{width:100%; height:420px;}

    #special {display:table;align-content: center;float:none;width:50%;}
    .blog-image{width:370px; height:270px;}
    .box1 p{float:left;}
}

and html:

   <section id="part3">
         <div >
             <h1 >RESTAURANT MENU</h1>
             <div id="S1">
                 <h2 >Main Menu</h2>
                 <div >
                     <img  src="images/first1.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span >$ 31,99</span>
                 </div>
                 <div >
                     <img  src="images/first2.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span >$ 31,99</span>
                 </div>
                 <div >
                     <img  src="images/first3.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span >$ 31,99</span>
                 </div>
             </div>

             <div id="S2">
                 <h2 >Desserts</h2>
                 <div >
                     <img  src="images/second1.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span >$ 31,99</span>
                 </div>
                 <div >
                     <img  src="images/second2.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span >$ 31,99</span>
                 </div>
                 <div >
                     <img  src="images/second3.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span >$ 31,99</span>
                 </div>
             </div>
         </div>
     </section>

CodePudding user response：

When you write a max width query, it is always matching with the first description.

Say your screen is 300px; it is still a valid screen fir max-width:1200px

to fix it use the ones below in that order.

  @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }

CodePudding user response：

I made a lot of change in your html and css code i hope this what you need check below

#part3 {
  padding-bottom: 100px;
  background-color: white;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  .container {
    width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    width: 1320px;
  }
}

#part3 .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

#S1 {}

#S2 {}

.menu-h2 {
  text-align: center;
}

.menu-box1,
.menu-box2 {
  position: relative;
  background-color: #f1f1f1;
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
}

.menu-img {
  width: 255px;
}

.price {
  text-align: center;
  display: block;
}

<section id="part3">
  <h1 >RESTAURANT MENU</h1>
  <div >
    <div id="S1">
      <h2 >Main Menu</h2>
      <div >
        <img  src="images/first1.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span >$ 31,99</span>
        </div>
      </div>
      <div >
        <img  src="images/first2.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span >$ 31,99</span>
        </div>
      </div>
      <div >
        <img  src="images/first3.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span >$ 31,99</span>
        </div>
      </div>
    </div>
    <div id="S2">
      <h2 >Desserts</h2>
      <div >
        <img  src="images/second1.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span >$ 31,99</span>
        </div>
      </div>
      <div >
        <img  src="images/second2.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span >$ 31,99</span>
        </div>
      </div>
      <div >
        <img  src="images/second3.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span >$ 31,99</span>
        </div>
      </div>
    </div>
  </div>
</section>