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

Question

我正在开发的网站有问题，目前是纯 HTML、CSS 和 JS (FullPage.js)。

我的目标是当宽度达到一定大小时，所有元素都以页面为中心并且页面溢出使用 fullpage.js

What I see at 320x668 resolution

After applying Flexbox

目前我遇到的问题如下，元素没有按预期居中并且重叠。

@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>

如果我不把“关于我们”的文字写成 absolute 而我给它一个 transform(-50%,-50%) 它似乎强制它在屏幕的左边而不是像我一样死点以为会。

如果有人能帮助我发现我所缺少的东西，我将不胜感激。我知道这可能看起来很基础，但我对 W3CSchools 和类似资源的搜索并没有让我的理解变得更容易。

Answer 1

您是否考虑过使用 CSS Flexbox？只需将带有 flex-direction: 列的 Flex 显示属性添加到您的部分和 div 中，即可为您提供所需的响应式垂直布局

Answer 2

@media only screen 
  and (max-width: 600px) {
  
    #aboutUs {
      text-align: center;
    }
  
    #aboutTitle {
      font-family: fantasy;
    }
    
    #makingtext {
      width: 100%;
    }

    #sparkletext {
      font-family: 'Pacifico';
      background: rgb(255, 112, 184);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .s2 {
      background-color: aqua
    }

    #beach_icon {
      font-size: 124px;
    }

    #camera_icon {
      padding-bottom: 20px;
      font-size: 72px;
     }

    .aboutimagediv {   
      display: none;
    }

    #aboutParagraphOne {
      font-size: 2.5vh;
      padding-bottom: 20px;
    }

    #aboutParagraphTwo {
      font-size: 2.5vh;
      text-align: center;
      padding-bottom: 10px;
      padding-top: 20px;
    }

    #aboutParagraphThree {
      font-size: 2.5vh;
      padding-bottom: 10px;
      padding-top: 20px;
    }
}

<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>

如果您删除所有覆盖居中的静态位置，居中就不是问题。还显示块...但是它不会解决 124px font-size 对于那么小的屏幕来说太大的问题。

Answer 3

这就是你想要做的。

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* i changed the query from 600 to 900 so it can show once you run this sinppet
don't forget to change it to 600px once you copy the code
*/

@media only screen and (max-width: 900px) {
  .s2 {
    /* display: flex; */
    background-color: aqua;
    /* flex-direction: column; */
    /* justify-content: center; */
    height: 100%;
  }
  .abouttextdiv {
    width: 100%;
    height: 100%;
  }
  #aboutTitle {
    font-family: fantasy;
    /* width: 100%; */
    /* display: flex; */
    /* flex-direction: column; */
    padding: 10px;
    /* left: 25%; */
    text-align: center;
  }
  #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: #ff70b8;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
    text-align: center;
  }
  .icon-holder {
    text-align: center;
  }
  #beach_icon {
    /* position: flex; */
    /* flex-direction: column; */
    font-size: 28px;
  }
  #camera_icon {
    /* position: flex; */
    /* flex-direction: column; */
    padding-bottom: 20px;
    font-size: 28px;
    text-align: center;
  }
  .aboutimagediv {
    display: none;
  }
  .abouttextdiv {
    text-align: center;
  }
  .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%;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

<section class="section s2" id="aboutUs">
  <h1 id="aboutTitle">About Us</h1>
  <div class="aboutimagediv">
    <img src="assets/images/image.jpg" height="200" width="200" 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 class="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>
    <div class="icon-holder">
      <i class="fas fa-umbrella" id="camera_icon">camera_alt</i>

    </div>
    <p id="aboutParagraphTwo">Our passion lies with making you <br> feel as great as you look </p>
    <div class="icon-holder">
      <i class="fas fa-camera" id="beach_icon">beach_access</i>
    </div>
    <p class="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>

如果这不起作用，请告诉我。

Answer 4

主要问题似乎是您在多个元素上使用 transform: translate(-50%, -50%); 和 left: 50%，这将（也）将它们垂直向上移动并使它们以这种方式重叠。删除这些设置，或者如果您已经为 non-mobile 屏幕尺寸设置了类似的 transform 设置，请通过将它们更改为 left: 0 和 transform: none.

来“中和”它们

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

Responsive Web Development Issue - Overlapping elements

html

css

flexbox

responsive