I am looking to modify my header layout for mobile viewing. Currently, on larger screens the logo is displayed with text beside it. However, on mobile devices I want the text to appear below the logo, possibly condensed to just one line with a bullet point separating them. The issue I am encountering now is that when I view the site on mobile, the logo and text resize but the text becomes too large and falls off the screen.
You can find the site at: jeepscycleclub.x10host.com
Below is the CSS code for the #pageheader:
#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;
}
And here is the HTML code:
<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>
This website is still in the testing phase as I work out these layout changes before making it live.
Thank you for your help.