onTheInternet onTheInternet - 2 months ago 17
CSS Question

Prevent H1 tag from breaking to new line

I am creating a dynamic web page using foundation. Everything transitions flawlessly to phones and tablets. However, I have creating this on a 1920 x 1080 monitor. And when I tested it on a 1280 x 1024 monitor, my H1 logo and h2 tagline broke.

Here are some screen shots to show you what I mean

[What it looks like on my monitor][1]

[What it looks like on a lower resolution monitor][2]

Im not sure how to fix this. Here is my CSS and HTML.

/*Header*/

#voipHeader{
max-height:106px;
min-height:105px;
background-color:#666666;
border-bottom-width:3px;
border-bottom-style:solid;
border-bottom-color:white;


}

#logo{

max-height:106px;

border-right-width:3px;
border-right-style:solid;
border-right-color:white;
line-height:none;
text-align:center;
background-color:#f58026;
}

#logo h1{
margin-top:10px;
font-weight:400;
font-family:'Gill Sans MT';
font-size:2em;
margin-bottom:0px;
}

#logo h2{

margin-top:0px;
font-weight:500;
font-family:'Myriad Pro' ,Arial;
font-style:italic;
color:white;
font-size:1em;
padding-bottom:15px;
}

<div class="row collapse" id="voipHeader">

<!--Logo-->
<div id="logo" class="large-2 columns small-12 columns">
<h1>VoIP Innovations</h1>

<h2>Your Premier Wholesale VoIP Carrier</h2>
</div>

<!--Navigation-->
<div id="navigation" class="large-10 columns small-12 columns">
<ul>
<li><a href="#">Clients</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Inquiry Form</a></li>
</ul>

</div>
</div><!--End Row-->

Answer

If you want to prevent your h1 to break into multiple lines, you can use the following statement:

h1 { white-space: nowrap; }

This only works in browsers which support CSS3 and you may have to set an overflow property on the containing element.

I do think you may want to look for a different solution to this issue. Your h1 is simply too big for your header on small screens.

Using @media queries in your CSS files, you can either display the two divs below each other or reduce the font size on smaller screens.