在我的页面中,我有一个面板和2张图像,我将这些类设置为响应式,但它不起作用。
这是我的代码:

JSFIDDLE

我该如何解决?

编辑:

最佳答案

问题是您已将profile-image类设置为width:1000px

如果将css设置为硬编码值,则由于没有在任何media-query下未提供它,因此它不可能充当响应式布局

我删除了width:1000px并将其删除了 seems to work fine here

.profile-image{
    margin: 50px auto !important;
    text-align: center !important;
    position: relative;
   /* notice that "width" has been removed*/
}


如果您坚持使用width:1000px,请将其包装在media-query下:

  @media only screen
    and (min-width : 1224px) {
      .profile-image{
        margin: 50px auto !important;
        text-align: center !important;
        width: 1000px;
        position: relative;
    }
}


demo here

编辑

由于您在自定义CSS中的规则,面板无法正常工作

.person-info{
    float: right;
    margin: -40px 71px -40px auto; /* this wrapper here is
                                  pushing it 40px left of
                                   screen and hence responsiveness is lost totally */
    width: 808px; /* avoid fixed width without media-query*/
}


删除它们,然后 see it working (添加红色边框以显示用于演示目的的轮廓)

09-10 05:12
查看更多