Question

我正在使用此网站http://steam-to-rent.ch/，我在移动版本中遇到了一些问题。（见附件）

正如您可以从屏幕上看到的，在移动设备上＆＃34;肖像＆＃34;模式没有问题（图1），但我在横向模式下遇到一些问题（仅限智能手机等小型设备）

见图2和图3

我需要的是在Landascape模式仅

上隐藏此部分

HTML：

  <!-- HOME -->
<div id="home-area">
    <div class="overlay">
        <div class="container">
            <div class="row">


                <!-- HOME FEATURE IMAGE -->
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="home-feature pull-right center-block wow bounceIn" data-wow-duration="1s" data-wow-delay="1s">
                        <img class="img-responsive" src="img/app.png" alt="" align="right">
                    </div>
                </div>
                <!-- END HOME FEATURE IMAGE -->

                <!-- HOME CONTENT -->
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="home-content wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0s">
                        <p>Böllistrasse 18<br>CH-5072 Oeschgen<br>Tel. +41 (0)62 866 16 88<br>Fax. +41 (0)62 866 16 99<br>info@z-ag.ch</p>
                    </div>
                </div>
                <!-- END HOME CONTENT -->

            </div>
        </div>
    </div>
</div>
<!-- END HOME -->

我认为媒体查询是正确的

CSS：

        @media (max-width: 992px) {
        .home-feature {
            margin-top: 40px;
        }
    }
    /* Small devices (tablets, 767px and up) */

    @media (max-width: 767px) {
        .home-content {
            text-align: center;
        }
        .service-content {
            margin-left: 0px;
            margin-top: -17px;
        }
        .single-portfolio {
            float: left;
            width: 50%;
        }
        .portfolio-filter {
            text-align: center;
        }
        .portfolio-filter a {
            line-height: 45px;
        }
        .section-title {
            text-align: center;
        }
        .footer-menu {
            text-align: center;
        }
        .footer-content {
            text-align: center;
        }
    }
    /* Extra Small Devices (Phone, 480px and up) */

    @media (max-width: 480px) {
        .home-content {
            padding-top: 0px;
        }
        .single-portfolio {
            float: left;
            width: 100%;
        }
        #newsletter input[type="email"] {
            font-size: 16px;
        }

    }

    @media only screen and (min-device-width: 320px) and (max-device-width: 768px) { .service-content.home { margin-top: 50px !important; }
        .home-feature.pull-right.center-block.wow.bounceIn { margin-top: -50px; }

    }

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)  { 
        .service-content.home { margin-top: -30px !important; }
        #Image-Maps-Com-image-maps-2015-10-05-052615 { margin-right: 180px; }
        .stampa { display: none !important; }

    }

Answer 1

试试这个：

方向：风景

例如：

@media (min-width: 700px) and (orientation: landscape) {
    /* Your style goes here */
    }

在横向视图中隐藏div（仅限小型设备）

1 个答案: