텍스트가 포함 된 반응 형 헤더 로고

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;을 추가하십시오. 너비/최대 너비를 변경해야합니다. 그렇지 않으면 로고 아래에있을 때 텍스트 공간이 없습니다. 미디어 쿼리에

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