Resizing Headings when Window Size Changes

Question

I'm currently working on a website where I need to put some images and some heading and description will be going along with it. If the browser is full screen, the heading appears on a single line; however, if the browser width is decreased, the heading automatically appears on two lines.

Here's how it looks when the browser is full screen:

Here's how it looks when the browser width is decreased:

I want to make it so that the size of the heading is decreased when the browser width is decreased and was wondering how I could do it. I wasn't able to find any good resource on Google or I might just not be searching with the right keywords.

I'm developing the website using Ruby on Rails with Bootstrap (2.3.2). I'm also using SASS and jQuery, but I'm new to it.

Answer 1

You can do it with css @media operator:

h1 {
    font-size: 30px;
}

@media screen and (max-device-width : 400px)
{
  h1
  {
    font-size:20px;
  }
}

@media screen and (min-device-width : 600px)
{
  h1, div, etc
  {
    /* any css rules */
  }
}

Also check useful resources:
auto resize text (font size) when resizing window?
http://alistapart.com/article/responsive-web-design
http://www.w3.org/TR/css3-mediaqueries/

Answer 2

Bootstraps use css media queries to do that. Here is the documentation from bootstrap: http://getbootstrap.com/css/#grid-media-queries And here's a crash course in media queries: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/

To achieve what you want, you need to write something like this in your application.css.scss:

@media (min-width: @screen-md) {
  h1{font-size: 14px}
} 

• "h1" should be replaced for the tag of the heading
• you should check you're targeting to the correct min-width.