问响应式Web开发问题-元素重叠

EN

@media only screen and (max-width: 600px) 
{

.s2 
{
    
 display: flex;
 background-color: aqua; 
 flex-direction: column; 
 justify-content: center;

}
    
#abouttextdiv 
{
    width: 100%; 
    height: 100%;
}

#aboutTitle
{
    
    font-family: fantasy;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    left: 25%;
    
}

#makingtext
{   
    
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    padding-top: 20px;
    left: 25%;
}

#sparkletext
{
    
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%);
    font-family: 'Pacifico';
    background: rgb(255, 112, 184);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
    
}

#beach_icon
{
    
    position: flex;
    flex-direction: column;
    font-size: 48px;

}

#camera_icon
{
    
    position: flex;
    flex-direction: column;
    padding-bottom: 20px;
    font-size: 48px;
    
}


.aboutimagediv
{   
    
    display: none;
            
}

#aboutParagraphOne
{
    
    position: flex;
    flex-direction: column;
    transform: translate(-50%, -50%);
    font-size: 2vh;
    text-align: center;
    width: 100%;
    padding-bottom: 20px;

}

#aboutParagraphTwo
{
    
    position: flex;
    flex-direction: column;
    font-size: 2vh;
    transform: translate(-50%, -50%);
    text-align: center;
    padding-bottom: 10px;
    padding-top: 20px;
    width: 100%;

}

#aboutParagraphThree
{
    
    position: flex;
    flex-direction: column;
    left: 50%;  
    transform: translate(-50%, -50%);
    font-size: 2vh;
    padding-bottom: 10px;
    padding-top: 20px;
    width: 100%;
}

}

<section class="section s2" id="aboutUs">
  <h1 id="aboutTitle">About Us</h1>
  <div class="aboutimagediv">
    <img src="Media/Images/About_Page/hennaAndNails.jpg" alt="Image of Woman's nails with Glitter and Henna" class="aboutimage">
  </div>
  <div class="abouttextdiv">
    <h2 id="makingtext">Making your day </h2>
    <h2 id = "sparkletext">Sparkle</h2>
    <!--<p id = "tagline">We run booths at events all around County</p><!-->
    <!-- <p id="aboutParagraphOne">As a small business in Area,<br> we love all things glitter and Shine</p><!-->
    <!-- <p id="aboutParagraphThree">You can find us at all the best events, <br> festivals and parties around Area!</p><!-->
    <p id="aboutParagraphOne">Our main aim is to sparkle and shine where ever we go. <br> Creating happiness, laughter and a fun vibe to every second we are with you. From small events, large events or even a home event we are here to cater to your needs. </p>
    <i class="material-icons" id="camera_icon">camera_alt</i>
    <p id="aboutParagraphTwo">Our passion lies with making you <br> feel as great as you look </p>
    <i class="material-icons" id="beach_icon">beach_access</i>
    <p id="aboutParagraphThree">Parties, festivals, fetes and carnivals wedding we cover them all. <br> Pampering, at your home or my home salon includes nail services to both fingers and toes. Bump Paintings can be accommodated at your home for your comfort or at my home salon if you're planning a surprise.</p>
  </div>
</section>