Question

你好伙伴堆叠器。

我在位于display:flex和div Y中间的X使用div，you can see here。但是我想让它响应，它几乎就是！当我将浏览器的大小调整为大约250像素div时，div中的文字就会停止响应。

现在我明白，如果我删除display:flex，它将允许文本继续响应。但是，当我这样做时，对齐会降到div的底部。我删除display:flex时未显示错位，但这会让我相信我的代码中有某些内容依赖于display:flex来保留对齐方式。你可以view the website here。请在上面的链接中找到下面的代码和Jsfiddle。很有责任。

＆＃13;

 #registry {
    background-color:#fff;

    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}




.pane {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    min-height:50vh;
    padding:6rem 1.5em;
    position:relative;
    width:100%
}
.pane .pane-title, .pane .title-section {
    margin-bottom:2em;

}

.pane-title h2{
 font-family: 'Abril Fatface', cursive;
 text-transform: uppercase;
 font-size: 1.875em;
}

@media (max-width:222px){
.pane-title h2{   
    font-size:1.3em;
}
}

.pane .pane-content {
    max-width:68em;
    margin-left:auto;
    margin-right:auto
}
.pane .pane-content::after {
    clear:both;
    display:table
}
.pane .pane-row {
    display:block;
    margin-bottom:3em
}
.pane .pane-row::after {
    clear:both;
    display:table
}
.pane.flex {
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    flex:1;
        flex-direction: column  
    -ms-flex-line-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center
}
.pane.flex .pane-content {
    -webkit-align-self:center;
    -ms-flex-item-align:center;
    align-self:center
}



 
#registry {
    background-image:url(http://kadeem.london/Content/Image/KL.png);background-color:#e94378;
    -webkit-background-size:cover;
             -moz-background-size: cover;
     -o-background-size: cover;
    background-size:cover;
    min-height:110vh
}
#registry .pane-content {
    max-width:48em;
    background-color:#fff;
    padding:6em 2em
}

@media screen and (min-width:768px) {
    #registry .registry-description {
        float:left;
        display:block;
        margin-right:2.12766%;
            text-decoration: none;
        width:65.95745%;
        margin-left:17.02128%
    }
    #registry .registry-description:last-child {
        margin-right:0
    }
    #registry p {
        text-align:center
    }
}

.registry-description p a{
    text-decoration: none;
      border-bottom: 1px solid #000;
    color: #000;
}

.registry-description p a:hover{
    text-decoration: none;
    background-color: #000;
    color: #fff;
}

＆＃13;

<section id="registry" class="pane flex">
    <div class="pane-content">
        <div class="pane-title">
            
<h2>Get In Touch</h2>

<span class="underline"></span>

        </div>
        <div class="registry-description">
            <p>I hope your liking my website so far. If you would like to work with me you can <a href="tel:+447941661853">give me a call</a> or message me on the email below. Alternatively you can view more of my <a href="">articles</a>, <a href="">designs,</a> and <a href="">projects.</a>
            </p>
            <br>
            <button class="connn"><a>contact@kadeem.london</a>
            </button>
        </div>
    </div>
</section>

＆＃13;

Answer 1

您的联系按钮（contact@kadeem.london）正在阻止内容进一步调整大小。

然而，话虽如此，您可能不需要担心支持缩小的设备 - 我所知道的所有设备在纵向方向上至少宽480像素。

显示：灵活响应，同时保持对齐

1 个答案: