Grow your CSS skills. Land your dream job.

CSS mobile device Landscape orientation will not work

  • # June 24, 2013 at 7:50 pm

    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;
    }

    # June 25, 2013 at 6:39 am

    >@media (max-width: 480px)

    Is not a landscape width AFAIK

    # June 25, 2013 at 1:59 pm

    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 */
    }
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".