3

So I'm working on a web app using kickstrap, though this is, at base, a bootstrap question.

I need completely different layouts (i.e. html structures) per media queries/screen sizes. Meaning specific html elements move to totally different locations on the screen when viewed on tablets and phones and thusly becoming different span(s) widths and such.

This is working up to a point, but I'm not sure I'm going about it the right way.

Right now I have my html for desktop and I use the bootstrap responsive-utilities to hide and show. example: My primary desktop view is "visible-desktop hidden-tablet hidden-phone"

I then have the same block of html (modified as needed for the change in the layout) for the 979px - 768px media query and using "hidden-desktop visible tablet hidden-phone.

I figure this is the easiest way to keep track of the various layouts and make changes when necessary later. The problem, however, is when I get to the phone layouts. I need a unique one for phone landscape and a unique one for phone portrait. Using the hidden/visible-phone doesn't allow me to distinguish between the two.

So I guess my first question is... Is this a good way to approach my needs or am I totally on the wrong track? If I'm wrong in my idea, what should I be doing?

Adam Grant
  • 12,477
  • 10
  • 58
  • 65
beahuman
  • 31
  • 2
  • Can you provide some images or links maybe? This almost sounds more like a design problem rather than a programming one. – Adam Grant Jan 13 '14 at 14:08

1 Answers1

1

You could create a couple responsive utilities to fine tune the mobile layout (LESS source):

.visible-xs-portrait,
.visible-xs-landscape {
  display: none !important;
}

.visible-xs-portrait{
  @media (max-width: @screen-xs-max)  and (orientation:portrait) {
    display: block;
  }
} 

.visible-xs-landscape{
  @media (max-width: @screen-xs-max)  and (orientation:landscape) {
    display: block;
  }
}

Replace display:block with .responsive-visibility(); if you are using this on faux table elements.

As to the general strategy, the push/pull classes or flexbox might be more efficient methods. Can't say without an example of the page and your browser support requirements.

Lance
  • 861
  • 7
  • 12