Css the section is elongating on iphone x

HTML-CSS
1

the height of the sections are expanding and the gap between the text is increasing here in the image

Screenshot_4
Screenshot_4518×912 61 KB

and heres the react js codes

import React from "react";
import "./Home.css"
import { useState } from "react";
import { Link } from 'react-router-dom'
import { BsArrowRight } from "react-icons/bs";
import Fade from "react-reveal/Fade";
import Product from "./Product";




function Home() {
  const images = [
    "/assets/gold-closed.png",
    "/assets/silver-closed.png"
  ];

  const [product, setProduct] = React.useState(0);

  
  const [colors] = useState([
    "/assets/gold-closed.png",
    "/assets/silver-closed.png"
  ])
  const [chosenColor, setChosenColor] = useState(colors[0])


  return (
      <div>
      <div>
        <div className="the">
          
        <Fade top delay={1050}>
            <img id="prod" src="/assets/pine.png" alt=""/>
          </Fade>
          

          <Fade top delay={2050}>
            <p id="main-price">$30.99</p>
            <p id="main-discounted">$40.99</p>
            <div id="buynow1">
              <a href="/">Buy now</a>
            </div>
          </Fade>
        </div>

        <div className="second-section">
          <img
            data-aos="fade-down"
            id="backgroundedsilver"
            src="/assets/kid.jpg"
            alt=""
          />

            <p id="descrpth1">Surprise your kids with their own Christmas Tree</p>
          <p id="description">
            If your kids are too young to join in the
            decorating the Christmas tree why not get their own? 
            Felt Pine is a great way for your childs to experience what Christmas is all about!
          </p>

          <p id="formore">
            {" "}
            <a href="./productpage">
              For more information <BsArrowRight />
            </a>
          </p>
        </div>

        <div id="sectionid1" datatype="section1data" className="section1">
          <h1 id="headh1">Felt Pine Tree for kids</h1>

          
            
                  <div>

                  <div className="helo">
                              <img id="pine" src="/assets/pine.png" alt=""/>
                                  </div>
                                  
                                    <div className="product-details">
                                    <Product
                                      title="Felt Pine Tree"
                                      price={30.99}
                                      image="/assets/pine.png"
                                      discount={40.99}
                                    />
                                  </div>     
                        <img id="stars" src="/assets/stars.png" alt=""/>
                        <p id="rewiews">(18)</p>
                  </div>

            
        </div>

        <div className="transparent">
          <p>transparent</p>
        </div>
      </div>

      <div className="extender">
        <footer>
          <h1 id="II">İmportant İnformation</h1>
          <Link to="/contact" id="pp">Privacy Policy</Link>
          <Link to="/contact" id="tof">Terms of Service</Link>
          <Link to="/contact" id="sp">Shipping Policy</Link>
          <Link to="/contact" id="rp">Refund Policy</Link>
          <h1 id="MS">Menu Shortcuts</h1>
          <Link to="/" id="hm">Home</Link>
          <Link to="/productpage" id="prp">Product Page</Link>
          <Link to="/checkout" id="ct">Cart</Link>
          <Link to="/Faq" id="fq">FAQs</Link>
          <Link to="/contact" id="cnct">Contact</Link>
          <p id="copyright">Copyright ®</p>
        </footer>
      </div>
    </div>
  );
}

export default Home;

and heres the css


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap');



html body{
  overflow-x: hidden !important;
  overflow: hidden;
  overflow-y: scroll;
  
}

*{
  margin: 0;
  padding: 0;
}

.carousel-wrapper{
    height:500px;
    position:relative;
    width:900px;
    margin:0 auto;
    max-width: 100%;
    z-index: 3;
  }
  .carousel-item{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:25px 50px;
    opacity:0;
    transition: all 0.5s ease-in-out;
    margin-bottom: 19%;
  }
  .arrow{
    border: solid white;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 14px;
  }
  
  .arrow-prev{
    left:-30px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(135deg);
  }
   
  .arrow-next{
      right:-30px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(-45deg);
    }
  
  .light{
    color:white;
  }
  
 
  
  /*Select every element*/
  [id^="item"] {
      display: none;
    }
   
    #prod{
      width: 80vw;
  height: 87vw;
  position: absolute;
  top:26%;
  left: 10%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    }
  
    .item-1 {
    background-image: url(//public/assets/gold-closed.png);
      z-index: 2;
      opacity: 1;
    background-size: 90%;
    background-repeat: no-repeat;
    align-items: center;
    background-position: center;
    justify-content: center;
    transition-duration: 500ms;
    }

    .item-1:hover{
    }

  .item-2{
    background-image: url(//public/assets/gold-closed.png);
    background-size: 90%;
    background-repeat: no-repeat;
    align-items: center;
    background-position: center;
    justify-content: center;
    transition-duration: 500ms;
  }

  .item-2:hover{
    background-image: url(//public/assets/gold-closed.png);
  }
  
  
  *:target ~ .item-1 {
      opacity: 0;
    }
  
  #item-1:target ~ .item-1 {
      opacity: 1;
    }
  
  #item-2:target ~ .item-2, #item-3:target ~ .item-1 {
      z-index: 3;
      opacity: 1;
    }

    .section1{
      background-color: white;
      height: 106vh;
      width: 100%;
      max-width: 100%;
      position: absolute;
      z-index: 1;
      top: 110%;
    }

    #silverr{
      visibility: hidden;
    }

    

    #goldd{
      visibility: visible;
    }

    @media only screen and (max-width: 720px) {
      body {
        overflow-x: hidden;
      }

     .p1 img{
       width: 200px;
     }

      #the{
        height: 100vh;
      }

      #backgroundedsilver{
          max-width: 100%;
        top: 10%;
        width: 100vw;
        object-fit: fill;
        align-self: center;
        position: absolute;
      }

      #descrpth1{
        position: absolute;
        top: 55%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 6vw;
        font-family: montserrat;
        width: 80vw;
        text-align: center;
      }

      #withdiscount{
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        top: 67%;
        z-index: 5;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      #withoutdiscount{
        font-size: 20px;
        color: gray;
        font-family: crimson;
        text-decoration-line: line-through;
        position: absolute;
        z-index: 4;
        top: 67%;
        left: 70%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      .carousel-wrapper{
        width: 70vw;
        position: absolute;
        top: 15%;
        left: 15%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      #headh1{
        font-size: 4vh;
        font-weight: 300;
        writing-mode: horizontal-tb;
        font-family: Karla;
        position: absolute;
        top: 57%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 7;
      }

      #color-gold{
      width: 70vw;
      }

      .helo{
        width: 200px;
      }

      .product-details{
        width: 300px;
      }

      .arrow{
        padding: 12px;
      }

      #stars{
        z-index: 600;
        width: 100px;
        position: absolute;
        top: 69.8%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      #rewiews{
        position: absolute;
        top: 69.6%;
        left: 67%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      #commentnum{
        color: black;
        font-family: montserrat;
        position: absolute;
        top: 63%;
        left: 68%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 2.5vh;
      }

      .pro-img{
        width: 70vw;
        position: absolute;
        top: 27%;
        left: 52%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      .thumb-img{
        position: absolute;
        top: 74%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      

      #secondh1{
        text-align: center;
      }

      #step-1{
        width: 200px;
        position: absolute;
        top: 25%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        
      }
      #step-2{
       width: 200px;
       position: absolute;
        top: 58%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }
     #step-3{
       width: 200px;
       position: absolute;
        top: 78%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }

     #pine{
       width: 80%;
       position: absolute;
       top: 33%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }

     #description{
       z-index: 5000;
       position: absolute;
       width: 300px;
       font-size: 6.4vw;
       top: 73%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: left;
     }

     #formore{
       position: absolute;
       top: 89%;
        left: 50%;
        width: 300px;
        color: goldenrod;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 400000000;
        font-size: 26px;
     }

     #formore a{
       text-decoration: none;
       color: goldenrod;
       font-size: 26px;
       position: relative;
       top: 5px;
       margin-left: 10px;
     }

     #buynow1{
       position: absolute;
       top: 85%;
        left: 24%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
        font-family: montserrat;
        
        text-align: center;        
        width: 50vw;
        padding-top: 15px;
        height: 40px;
        border: 1px solid white;
        text-decoration: none;
     }

     #buynow1 a{
       text-decoration: none;
       color: white;
     }

     #main-price{
       color: white;
       font-family: montserrat;
       position: absolute;
      font-size: 3vh;
      top: 78%;
        left: 38%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }

     #main-discounted{
      font-size: 3vh;
      color: gray;
      font-family: crimson;
      text-decoration-line: line-through;
      position: absolute;
      z-index: 4;
      top: 78%;
      left: 60%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
     }

     .comments{
      background-color: white;
      height: 110vh;
      width: 100%;
      position: absolute;
      z-index: 1;
      top: 316%;
     }

     #writeacom{
       width: 170px;
       padding-top: 15px;
       padding-bottom: 15px; 
       text-decoration: none;
       background-color: #545454;
       color: white;
       position: absolute;
      top: 14%;
      left: 70%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
      border-radius: 10px;
      font-family: montserrat;
     }

     #commenth1{
       margin-left: 5%;
       font-family: montserrat;
     }

     #starrate{
       font-family: montserrat;
       font-size: 4vh;
       margin-top: 10%;
       margin-left: 5%;
       color: white;
       text-align: center;
       width: 20%;
       height: 10%;
       background-color: #ffcc66;
       border-radius: 10px;
     }
     #starrate p{
      padding-top: 20px;
    }

    #commentp{
      font-family: montserrat;
      color: gray;
      margin-left: 5vw;
      margin-top: 2vh;
    }

    footer{
      background-color: #eeab24;
      color: white;
      width: 100%;
      height: 800%;
      position: absolute;
      top: 1068%;
      margin: 0;
      left: 0%;
      z-index: 600000000000;
      text-align: center;
      font-family: montserrat;
      overflow: hidden;
    }

    #II{
      font-family: montserrat;
      font-size: 8vw;
      position: absolute;
        top: 10%;
        left: 45%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 200px;
        text-decoration: none;
      color: white;
    }

    #pp{
      font-family: montserrat;
      font-size: 7vw;
      position: absolute;
        top: 20%;
        left: 29%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-decoration: none;
      color: white;
    }

    #tof{
      font-family: montserrat;
      font-size: 7vw;
      position: absolute;
        top: 30%;
        left: 33%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-decoration: none;
      color: white;
    }

    #rp{
      font-family: montserrat;
      font-size: 7vw;
      position: absolute;
        top: 40%;
        left: 30%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-decoration: none;
      color: white;
    }

    #sp{
      font-family: montserrat;
      font-size: 7vw;
      position: absolute;
        top: 50%;
        left: 34%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-decoration: none;
      color: white;
    }

    #MS{
      font-family: montserrat;
      font-size: 8vw;
      position: absolute;
        top: 57%;
        left: 35%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-decoration: none;
        color: white;
      }

    #hm{
      position: absolute;
      top: 60%;
        left: 22%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      font-size: 7vw;
      font-family: montserrat;
      text-decoration: none;
      color: white;
    }

    #prp{
      position: absolute;
      top: 66%;
        left: 36%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      font-size: 7vw;
      font-family: montserrat;
      text-decoration: none;
      color: white;
    }

    #ct{
      position: absolute;
      top: 72%;
        left: 20%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      font-size: 7vw;
      font-family: montserrat;
      text-decoration: none;
      color: white;
    }

    #fq{
      position: absolute;
      top: 78%;
        left: 22%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      font-size: 7vw;
      font-family: montserrat;
      text-decoration: none;
      color: white;
    }

    #cnct{
      position: absolute;
      top: 84%;
        left: 27%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      font-size: 7vw;
      font-family: montserrat;
      text-decoration: none;
      color: white;
    }




    #footertxt1{
      padding-top: 10px;
    }

    #copyright{
      padding-top: 1450px;
      color: white;
    }

    .transparent{
      background-color: transparent;
      height: 10vh;
      opacity: 6;
      z-index: 59;
      color: white;
      position: absolute;
      top: 346%;
      width: 100%;
      max-width: 100%;
    }

    .transparent p{
      visibility: hidden;
    }

    .the{
      z-index: 6000000000000;
      height: 350vh;
    }

    .extender{
      position: absolute;
      top: 30vh;
      height: 30vh;
      width: 100%;
    }

    

    .product__rating img{
      width: 20px;
    }

    .product__rating{
      position: absolute;
      top: 49%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    

    .product__price{
      position: absolute;
      top: 74%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-family: montserrat;
        font-size: 120%;
    }

    .helo img{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      width: 30%;
      margin-bottom: 2rem;
    }

    .product-details{
      color: black;
    }

    

    .product__discount{
      position: absolute;
      top: 74%;
        left: 67%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-family: montserrat;
        font-size: 120%;
        color: gray;
        text-decoration: line-through;
    }

    .product__title{
      visibility: hidden;
    }

    .buynow{
      border: none;
      background-color: black;
      color: white;
      width: 85%;
      height: 50px;
      font-family: montserrat;
      font-size: 5vw;
      position: absolute;
      top: 82%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .addtobasket{
      border: 2px solid black;
      background-color: white;
      width: 85%;
      height: 50px;
      font-family: montserrat;
      font-size: 5vw;
      position: absolute;
      top: 90%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 300;
    }
    }

      
    
    @media only screen and (min-width: 768px) {
      body {
        overflow-x: hidden;
      }

      #backgroundedsilver{
          max-width: 100%;
        
        width: 100vw;
        object-fit: fill;
        align-self: center;
        position: absolute;

      }

      #withdiscount{
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        top: 70%;
        z-index: 5;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      #withoutdiscount{
        font-size: 20px;
        color: gray;
        font-family: crimson;
        text-decoration-line: line-through;
        position: absolute;
        z-index: 4;
        top: 70%;
        left: 70%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      .carousel-wrapper{
        width: 70vw;
        position: absolute;
        top: 55%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      #headh1{
        font-size: 4vh;
        font-weight: 300;
        writing-mode: horizontal-tb;
        font-family: Karla;
        position: absolute;
        top: 57%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 7;
      }

      #color-gold{
      width: 70vw;
      }

      .arrow{
        padding: 12px;
      }

      .pro-img{
        width: 80vw;
        position: absolute;
        top: 37%;
        left: 52%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      .thumb-img{
        position: absolute;
        top: 78%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      

      #secondh1{
        text-align: center;
      }

      #step-1{
        width: 200px;
        position: absolute;
        top: 25%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        
      }
      #step-2{
       width: 200px;
       position: absolute;
        top: 58%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }
     #step-3{
       width: 200px;
       position: absolute;
        top: 78%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }

    }

   


    #headh1{
      justify-content: center;
      text-align: center;
      position: absolute;
      top: 63%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    
    

     .second-section{
      background-color: white;
      height: 140vh;
      width: 100%;
      position: absolute;
      z-index: 1;
      top: 216%;   
      max-width: 100%;
      max-height: max-content;
     }

     #choosecolor{
       position: absolute;
       top: 70%;
        left: 20%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 500;
        font-weight: bolder;
        font-family: montserrat;
        font-size: 4vh;
     }
     

     .carousel-wrapper{
      width: 70vw;
      position: absolute;
      top: 10%;
      left: 14%;

      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 3;
    }

    .arrow{
      border: solid white;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 8px;
    }
2

@oguzhanefe32

image
image1366×768 114 KB

Uncheck all the checkboxes and check them one by one and see the out put on your left hand side.

3

i did that and the problem is the position: absolute is causing that
so what can i use instead of position absolute to make it responsive

4

Sorry I was AFK. Can you tell me procedure how to setup your project in my pc.

Or

Check this CSS Grid Layout.