2

Im using the bootstrap examples with Meteor (fluid.html). I've updated my bootstrap to the latest 2.0.4.

However I'm having an odd problem with the padding-top: 60px; conflicting in the wrong way with

@media (max-width: 979px)
    body {
    padding-top: 0;
}

and well.. webkit seems to do this (only on Meteor for some reason):

enter image description here

It ends up looking like this:

enter image description here

(Theres a gap at the top above the black bar) - Of course this is the fluid layout so the browser needs to be dragged down to small view (for iPhones/Androids/Tablets)

How would I manage to get the browser to take padding-top: 0 as the preference so It doesn't do this? Or why is it doing this (the css files are loaded in the same order - first bootstrap.css and then bootstrap-responsive.css. I can't figure out the difference

(its supposed to be like this: http://twitter.github.com/bootstrap/examples/fluid.html)

Improve this question
5
  • Check the navbar-fixed-top class of your .navbar
    – Sherbrow
    Commented Jun 30, 2012 at 16:34
  • The div has both navbar and navbar-fixed-top
    – Tarang
    Commented Jun 30, 2012 at 17:01
  • Ive pretty much used the exact code as the example. Its meteor interfering somehow
    – Tarang
    Commented Jun 30, 2012 at 17:04
  • use Chrome Dev tools or Google Firebug to diagnose which CSS rule/file is responsible..
    – Lloyd
    Commented Jun 30, 2012 at 19:13
  • The screenshot is from dev tools, it seems that its taking preference on the <style> tagged class over the override supposed to be given by bootstrap-responsive.css, though I cant figure out what meteor is doing because this is exactly as it is in the example on bootstrap's own site
    – Tarang
    Commented Jun 30, 2012 at 22:03

2 Answers 2

Reset to default
2

After upgrading to 2.0.4 I still had the issue where at certain resolutions content would get hidden when using navbar-fixed-top. This is what happens at certain resolutions:

Content get hidden under navbar

After tweaking the CSS I came up with the following which fixes it at all resolutions when added to the top of my CSS file:

@media (min-width: 979px) { body { padding-top: 60px; } }

Padding adjusts properly with the proper media query

Hopefully this will sort out your issue.

Improve this answer
0

It does not just do this...

It does more than that. You should inspect what padding-top is set to instead, go through the whole panel and see what is setting it, this should tell you where the problem lies. In a really worst case you could use padding-top: 0 !important; although it should be known that !important is bad advice and you should be able to get around not having to add that.

I don't see how Meteor is responsible as they don't add in any major CSS changes as far as I am aware of; but it might be that there is, but you can only tell if you look where padding-top is set.

Improve this answer
6
  • I think i've found the issue. Meteor arranges the order of stylesheets in a slightly different way to the example. It's supposed to be 1) bootstrap.css 2) <style>...</style> 3) bootstrap-responsive.css But the css is all done at once with meteor so I guess i'll have to go with a manual fix.
    – Tarang
    Commented Jun 30, 2012 at 22:39
  • @Akshat: Where does the style tag come from? If you just create a .css that would load after bootstrap. If you are, however, not using the bootstrap smart package; then you can arrange the order of the stylesheets by either using directories to separate them or changing the filenames to be alphabetically in the order they need to be loaded. Order is indeed a small problem...
    – Tamara Wijsman
    Commented Jun 30, 2012 at 23:24
  • These are all copied from the example. Its where the padding came from. I will try the alphabetical load.
    – Tarang
    Commented Jul 1, 2012 at 10:20
  • Alphabetically wont work because both bootstrap packages would load before my css.. It would have to load before bootstrap's packages
    – Tarang
    Commented Jul 1, 2012 at 10:24
  • In order to override bootstrap's behavior, wouldn't your css have to come after bootstrap's packages?
    – Tamara Wijsman
    Commented Jul 1, 2012 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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