応答性のあるヘッダーのロゴ付きテキスト

Question

モバイルで表示したときにヘッダーが変更されることを希望します。大きな画面にはロゴの横にテキストが表示されています。モバイルでは、テキストがロゴの下に来るようにしたいと思っています。今はモバイルで見ると、ロゴとテキストのサイズが変更されますが、テキストが大きくなりすぎて画面から外れます。ここで

は、サイトへのリンクである：ここでは 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>