html - 响应式 Web 开发问题

问题描述

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

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

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

@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 和类似资源的搜索并没有减轻我的理解。

标签： htmlcssflexboxresponsive

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

问题描述

解决方案

推荐阅读