1

I'm trying to set up the general structure of my site before adding any content and the media queries are not operating how I'd expect.

Using Sass I have the following

html
  width: 100%
  height: 100%

body
  height: 100%
  width: 100%

header
  height: 9%
  background-color: green

#dashboard
  padding: 0 4% 0 8%
  #angular-body
    height: 91%
    .ng-scope
      height: 100%
      .bootstrap-column-padding-fix-wrapper
        padding-right: 15px
        padding-left: 15px
        #body-column-wrapper
          height: 100%
          #left-column
            height: 100%
            background-color: yellow
          #middle-column
            background-color: blue
            height: 75%
          #right-column
            background-color: red
            height: 25%

@media (min-width: 692px)
  #dashboard
    padding: 0 4% 0 8%
    #angular-body
      .ng-scope
        .bootstrap-column-padding-fix-wrapper
          #body-column-wrapper
            #middle-column
              height: 100%
            #right-column
              height: 100%

My html is as follows

.bootstrap-column-padding-fix-wrapper
  .row#body-column-wrapper
    .col-lg-2.col-md-1.hidden-sm.hidden-xs#left-column
    .col-lg-6.col-md-7.col-sm-8#middle-column
    .col-lg-4.col-md-4.col-sm-4#right-column

I would expect that between 0 and 692 pixels the middle column had a height of 75% and the right column had a height of 25% (within their parent). Instead between 624px and 691px they are both at 100% but 623px and below they are as expected (25% and 75% pixels respectively).

I'm less looking for a "here's the right code" and more looking for a "this is the reason what you're doing isn't acting in the way you intended". I've been reading through the bootstrap documentation but have yet to see something that would explain this.

Edit: Including general layout

%html{ 'ng-app' => 'ekoApp' }
  %head
    %meta{charset: "utf-8"}/
    %meta{content: "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
    %meta{content: "", name: "description"}/
    %meta{content: "width=device-width", name: "viewport"}/
    %base(href="/")
    = stylesheet_link_tag "application"
    = csrf_meta_tag
  %body#dashboard(ng-controller='baseCtrl')
    %header.clearfix
    %div#angular-body
      = yield
Morgan
  • 1,438
  • 3
  • 17
  • 32
  • Percentage heights are very tough to work with and I try to avoid using them. See this question for more info: http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work – Steve Sanders Jul 03 '14 at 20:29
  • I've used them before without issue but never applied to bootstrap columns + media queries which is why I think that's the issue. The media query, when applied, works as intended; it's just not being applied when I expect it to. – Morgan Jul 03 '14 at 20:38
  • 1
    Can you please post all of your css / html? For example there is no #dashboard or #angular-body html, #dashboard and .bootstrap-column-padding-fix-wrapper don't have any height set it on them... Or even better post an example of the issue that is as simplified as possible? – joshhunt Jul 03 '14 at 20:45
  • My recommendation is that you set up a jsfiddle and when you having that working then copy the code and update your question. The code in its current state will not show anything as you are missing a lot of height properties. – joshhunt Jul 03 '14 at 22:10

0 Answers0