Metro ui css отзывчивый

Я делаю сайт с использованием Metro UI css; удалось создать область плитки и указать отдельные плитки, но у меня возникла проблема, которая делает ее отзывчивой для мобильных устройств, так как некоторые из плиток удаляются от экрана, когда она имеет меньшее устройство.

Вот мой код до сих пор

    <body class="content" id="main">

    <div class="tile-area fg-white" style="height: 100%; max-height: 100% !important;">
        <h1 class="tile-area-title">HERMA</h1>

        <div class="tile-group double">
            <div class="tile-container">
                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>

                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>

                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>
            </div>
        </div>
        <!-- ./tile-group double -->

        <div class="tile-group double">
            <div class="tile-container">
                <div class="tile-large bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>

                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>
            </div>
        </div>
        <!-- ./tile-group double -->

        <div class="tile-group double">
            <div class="tile-container">
                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>

                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>

                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>
            </div>
        </div>


    </div>
</body>

и css для страницы

.content:before
{
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: 0;

    display: block;
    background-image: url("/img/dark-abstract-hd-wallpapers.jpg");
    background-size: cover;
    data-role: fitImage;
    width: 100%;
    height: 100%;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.content
{
    position: fixed;
    left: 0;
    right: 0;
    z-index: 0;
    margin-left: 20px;
    margin-right: 20px;
}

#main
{
    width: 100%;
    position: relative;
    margin: 0 auto;
    line-height: 1.4em;
}

@media only screen and (max-width: 479px)
{
    #main
    {
        width: 90%;
    }
}

что это способ сделать его отзывчивым, поэтому на экране может появиться прокрутка, предполагая, что я уменьшил размер экрана компьютера или сделаю его отзывчивым для мобильных устройств. Спасибо за помощь заранее.

jquery,html,css,responsive-design,metro-ui-css,

0

Ответов: 1

0

Попробуйте использовать кнопку «Toggle device» (верхний левый угол) в панели отладки браузера Chrome, которую можно открыть с помощью F12 вместо изменения разрешения экрана всего компьютера. Тогда проблема может исчезнуть.

JQuery, HTML, CSS, отзывчивый дизайн, метро-щ-CSS,
Похожие вопросы
Яндекс.Метрика