0

I am running the Bootstrap theme "Tweme" (however, this question will most likely apply to all Bootstrap themes) and would like to add responsive CSS. Adding commands like

@media (min-width: 1200px) {
  body {
    background: rgb(0,0,0);
  }
}

to my style.css does not have any effect. What is the best way to add responsive CSS to Drupal themes that are built on the Bootstrap library?

  • I'm not sure why this question deserves down votes. – deinqwertz Jul 4 '13 at 15:05
2

Your basic CSS is right. I would check to make sure:

1- Your css file is actually loading

I go to view source and look for my file name. If the file name appears in a giant weird JS object, but not in the css declarations that means the file can't be found (most likely a 404)

2- Your base theme isn't writing some overly specific CSS that you need to override.

Using the web inspector or a similar tool inspect the element you're trying to change, get your width where it should be to have your change apply (in that case greater than 1200 width) and see if there are styles overriding the one you wrote.

An easy temporary way to get around #2 would be to use !important at the end of your style, just to see if you're in the neighborhood, but that !important should be deleted of course :)

  • I don't know what happened. I updated the base theme and suddenly responsive styling worked. Thanks for your support! – deinqwertz Jul 9 '13 at 9:12
1

Just to clarify how bootstap works, it uses the less variables which is where you set the media breakpoints.

you can customize your bootstrap download from the link below

http://getbootstrap.com/customize/#variables-basics

Set your breakpoints in the > Media queries breakpoints section

the less code is then compiled to CSS where the @screen-sm-min and @screen-lg-min is replaced to actual css pixel format corresponding to your tablet and widescreens.

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
0

Tweme and Bootstrap are already responsive. No need to add more CSS code. What you need to do is add classes to your html tags for them to apply the bootstrap styling. See http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem

You need to use span1, span2, etc to tell bootstrap how many "sections" each item will take up. It allows for 12 "sections" in total per row and will automatically adapt to the viewport.

Hope that helps!

  • I believe you got me wrong. I am familiar with the responsive grid, but how do I apply CSS to certain breakpoints only? Say for example that I want my page to have a black background on tablet devices and a red background on wide screens. How do I achieve that? – deinqwertz Jul 5 '13 at 8:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.