Resize logo on mobile when using Twitter Bootstrap

Question

I am working on a website that has a log size of 320x150 and looks really well on a resolution bigger than 600px, but if it`s lower it starts stacking up.

How can edit bootstrap to use a smaller logo if the resolution of the browser is smaller the 600 px?

Thank you

Answer 1

Read up on media queries. They're used heavily in Bootstrap, and you'll just need to specify the image you want for each screen size range. It'll look something like this:

@media screen and (max-width: 600px) {
  .logo {
    background: url(my-image.jpg);
  }
}