1

Is it possible to detect if the device is rotated horizontally or vertically and change the bootstrap class accordingly?

This is how it looks like if the device is rotated vertically:

vertically rotated

Everything looks fine, bootstrap class col-xs-12 is used.

But if the user rotates the device horizontally, then there is alot of whitespace:

horizontally rotated

I want to use this whitespace and change col-xs-12 to col-xs-6 in this case, so that 2 containers are showing side by side.

Is this possible with bootstrap, or do I have to use javascript?

Black
  • 18,150
  • 39
  • 158
  • 271
  • It should work from the start... the reason why it was not using all the whitespace was that width is set to auto on the containers. – Black Nov 05 '18 at 15:13
  • Possible duplicate of [Differentiating portrait and landscape versions in media queries](https://stackoverflow.com/questions/30611170/differentiating-portrait-and-landscape-versions-in-media-queries) – yivi Nov 06 '18 at 16:15

1 Answers1

3

You shouldn't change classes, you should modify the selected class based on the orientation.

/* portrait */
@media screen and (orientation:portrait) {
  /* portrait-specific styles */
  .classYouWantToChange { 
     background: blue;
  }
}
/* landscape */
@media screen and (orientation:landscape) {
   /* landscape-specific styles */
  .classYouWantToChange { 
     background: black;
  }
}

As you can see in the code above, we're overwriting the class classYouWantToChange based on device orientation

gugateider
  • 1,983
  • 2
  • 13
  • 17
  • 1
    I'd recommend you create a new class and add to your element, then overwrite that class instead of overwriting bootstrap classes. Also make sure you use float: left if you want them side by side. – gugateider Nov 05 '18 at 15:04
  • Great to hear, accept the answer to help us simple mortals, happy coding :) – gugateider Nov 05 '18 at 15:11
  • I cant accept yet, I have to wait until 30 seconds passed. – Black Nov 05 '18 at 15:12