How to detect mobile being sideways?

[RikTelner]

I want to make kinda responsive design, problem is, my website is picture based and if you hold mobile vertically you see 2 giant bars above and below it. If you turn your mobile sideways I might just be able to find method to put it nicely together. SO, finally, the question, is there a way to detect whether mobile is being sideways? Or at least aspect ratio, if width would be bigger, it would mean it's sideways, if height would be bigger, it would mean it's "standing".

[mattster]

Most of the time you would use CSS breakpoints.
For instance:

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}

To organise things responsively, you need to look at a grid system. Lets say you have two images next to each other, and when you resize to below 320px (portrait mobile) you want the images to be next to each other.

Heres a jsFiddle demo. It's stupidly basic, and if you want to build an entire site on it, look at Bootstrap or PureCSS grids. These projects are fully developed and will handle anything you ever wanted... perfectly.

[gentlemedia]

There are specific CSS media queries to handle these situations.

@media all and (orientation:landscape) {

    /* landscape styles in here */

}


@media all and (orientation:potrait) {

    /* portrait styles in here */

}