Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Photospace Gallerific wordpress响应垂直图库缩略图媒体查询javascript css?_Css_Plugins_Responsive Design_Galleriffic - Fatal编程技术网

Photospace Gallerific wordpress响应垂直图库缩略图媒体查询javascript css?

Photospace Gallerific wordpress响应垂直图库缩略图媒体查询javascript css?,css,plugins,responsive-design,galleriffic,Css,Plugins,Responsive Design,Galleriffic,我想让我的图库在浏览器为移动设备缩小时能够响应,从垂直布局变为水平布局 请告诉我,当屏幕尺寸小于画廊顶部时,如何使其恢复 查看我的测试页面 我甚至尝试过媒体查询 .photospace_res .gal_content { float: left; width: 80%; } .photospace_res .thumbs_wrap2 { float: left; min-height: 800px; width: 20%; } @media

我想让我的图库在浏览器为移动设备缩小时能够响应,从垂直布局变为水平布局

请告诉我,当屏幕尺寸小于画廊顶部时,如何使其恢复

查看我的测试页面

我甚至尝试过媒体查询

    .photospace_res .gal_content {
    float: left;
    width: 80%;
}

.photospace_res .thumbs_wrap2 {
    float: left;
    min-height: 800px;
    width: 20%;
}
@media all and (max-device-width: 480px) {
    .photospace_res .gal_content {
        float: none;
        width: 100%;
    }

    .photospace_res .thumbs_wrap2 {
        float: none;
        min-height: 0;
        width: 100%;
    }
}
谢谢你的帮助
朱迪

耶,我修复了它,并添加了一些额外的样式

    .photospace_res .gal_content {
    float: left;
    width: 80%;
}

.photospace_res .thumbs_wrap2 {
    float: left;
    width: 20%;
}

.photospace_res {
    margin: 0;
}

.photospace_res .ss-controls {
    border: 1px solid #CCCCCC;
    margin-bottom: 20px;
    padding: 5px 10px;
}

@media screen and (max-width: 700px) {
    .photospace_res .gal_content {
        float: none;
        width: 100%;
    }

    .photospace_res .thumbs_wrap2 {
        float: none;
        min-height: 0;
        width: 100%;
    }
}