solo-skins/metro-hot/css/metro-hot-responsive.css

/**
 * Solo - A small and beautiful blogging system written in Java.
 * Copyright (c) 2010-2019, b3log.org & hacpai.com
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
/*
* skin metro-hot responsive style
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 1.0.0.6, Sep 30, 2013
*/
@media (max-width: 860px) and (min-width: 460px) {
    .wrapper {
        width: 720px;
    }

    .main {
        width: 460px;
    }

    .form {
        width: auto;
    }

    .form input {
        width: 395px;
    }

    .form textarea {
        width: 434px;
    }

    .em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, .em10, .em11, .em12, .em13, .em14 {
        margin-right: 4px;
    }

    #comments .article-body {
        width: 340px;
    }

    #dynamic #comments .article-body {
        width: 283px;
    }

    .most-comment,
    .most-view {
        width: 300px;
        margin-bottom: 20px;
        margin-top: 40px;
    }

    .most-comment .text,
    .most-view .text {
        width: 195px;
    }

    .tags-tile,
    .links-tile,
    .archives-tile {
        width: 670px;
    }

    .tags-tile .text,
    .links-tile .text,
    .archives-tile .text {
        width: 580px;
    }

    .links-tile,
    .tags-tile {
        margin-left: 0;
    }
}

@media (max-width: 460px) {
    .side,
    .top-info,
    .header > .fn-left,
    .comment-main {
        float: none;
    }

    .wrapper,
    .article-list > div,
    .main,
    .side {
        width: 300px;
    }

    .sub-nav > .pagination,
    .footer,
    #comments > div > img,
    #emotions {
        display: none;
    }

    #search {
        width: 237px;
    }


    .side-tile {
        width: 94px;
    }

    .online-count, 
    .user, 
    .notice-board,
    .share,
    .article-relative {
        width: 249px;   
    }

    .main .pagination,
    .main > .article-body,
    .comment-disabled,
    #comments > div {
        margin-right: 0;
    }

    .side > div,
    #comments .article-body {
        position: static !important;
        width: auto !important;
    }

    .share div.text {
        left: 173px;
    }

    .form {
        width: auto;
    }

    .form input {
        width: 240px;
    }

    .form textarea {
        width: 285px;
        height: 150px;
    }

    #dynamic .main {
        margin-bottom: 20px;
    }

    .tags-tile {
        margin-bottom: 50px;
    }

    .article-title {
        width: 280px;
    }

    .archives {
        margin-right: 0;
    }

    .article-info > a {
        padding: 3px;
        font-size: 12px;
    }

    #dynamic #comments {
        padding-left: 15px;
    }

    .tags-tile .title,
    .links-tile .title,
    .most-comment .title,
    .most-view .title {
        float: right;
        font-size: 15px;
        font-weight: bold;
        margin: 20px 0 0 40px;
    }

    .most-comment,
    .most-view {
        width: 249px;
        margin-left: 0;
    }

    .most-comment .text,
    .most-view .text {
        margin-right: 0;
        width: 274px;
        font-size: 12px;
        font-weight: normal;
    }

    .tags-tile,
    .links-tile {
        width: 249px;
        margin-left: 0;
    }

    .tags-tile .text,
    .links-tile .text {
        width: 249px;
    }
}