带有文本的响应式标题徽标

Question

我希望在移动设备上查看时可以更改标题。 在大屏幕上显示徽标以及其旁边的文本。 在移动设备上，我希望文字位于徽标下方，甚至可能只有1行，中间还有一个项目符号。 现在，当我在手机上查看时，徽标和文字会调整大小，但文字太大并掉在屏幕上。

这是该网站的链接：jeepscycleclub.x10host.com

这是#pageheader的CSS：

#pageheader {
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    position: relative;
    text-align: center;
    overflow: hidden;
    background-color: #2f2f37;
    max-height: 15vh;
}

    #pageheader img {
        max-height:15vmax;
    }

和我的HTML：

<div id="pageheader">
<img src="images/pageheader.gif">
    <header>
    <h2 style="font-size: 3vh;">Club Info: 316-755-0909</h2>
    <h2 style="font-size: 3vh;">FM 100.9 for Race PA System</h2>
    </header>
</div>

这只是我的测试站点，因此我可以在上线之前完成所有工作。

先感谢您。

Answer 1

添加flex-wrap: wrap; 为了这。 而且您必须更改width / max-width，否则当文字在徽标下方时，将没有空格。

 #pageheader { -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; position: relative; text-align: center; overflow: hidden; background-color: #2f2f37; flex-wrap: wrap; } #pageheader img { max-height:15vmax; } 

 <div id="pageheader"> <img src="http://placehold.it/150x80/a0f"> <header> <h2 style="font-size: 3vh;">Club Info: 316-755-0909</h2> <h2 style="font-size: 3vh;">FM 100.9 for Race PA System</h2> </header> </div>