CSS mobile device Landscape orientation will not work

[tjsmith22]

Can’t get landscape orientation to work on mobile device with css
@media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
}
.page-header h1 small {
display: block;
line-height: 20px;
}
input[type=”checkbox”],
input[type=”radio”] {
border: 1px solid #ccc;
}

fieldset {
width:99%;
}
.form-horizontal .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.form-horizontal .controls {
margin-left: 0;
}
.form-horizontal .control-list {
padding-top: 0;
}
.form-horizontal .form-actions {
padding-right: 10px;
padding-left: 10px;
}
.media .pull-left,
.media .pull-right {
display: block;
float: none;
margin-bottom: 10px;
}
.media-object {
margin-right: 0;
margin-left: 0;
}
.modal {
top: 10px;
right: 10px;
left: 10px;
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
.carousel-caption {
position: static;
}

[Paulie_D]

>@media (max-width: 480px)

Is not a landscape width AFAIK

[will_wallace85]

If it was a landscape width, it will only work for devices with screens smaller than 480px. Take a look at the galazxy one note to see what that won’t really work.

/* Portrait */

@media screen and (orientation:portrait) {

/* Portrait styles */

}

/* Landscape */

@media screen and (orientation:landscape) {

/* Landscape styles */

}

[Author]

Posts