Question

I am trying to design (responsive) a website that will appear perfectly in every devices. I am using blueprint CSS framework (converted to fluid) I have the following codes for a simple heading.

HTML

<div class="prepend-3" style="margin-top:20px;">
   <h1>Stack <span style="color:#C6CBCE">Overflow</span></h1>
</div>

MY CSS

h1 { 
   padding: 20px 0; margin: 0; 
   font-family: "Trebuchet MS", serif; 
   font-size: 9em; color: #222; 
   font-weight: normal; 
   line-height: 80px; }

The problem I am facing is when I run the code keeping my browsers window to maximum mode I can see both the words “stack” and “overflow” are in same line which is perfect, but when I don’t maximize my browser’s window, the line breaks down like following .

Could you please tell me how to fix this problem (make it responsive)?

Thanks 🙂

Answer 1

Try using white-space: nowrap; property

h1 { 
   padding: 20px 0; 
   margin: 0; 
   font-family: "Trebuchet MS", serif; 
   font-size: 9em; 
   color: #222; 
   font-weight: normal; 
   line-height: 80px;
   white-space: nowrap; <------Here
}

Or to be precise you can also specify different styles specific to screen sizes using CSS3 @media queries like, but I expect you are using this as you’ve specified Responsive

@media only screen and (max-device-width: 480px) {
 /* Styles Goes Here */  
}