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

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.