在我的页面中,我有一个面板和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 (添加红色边框以显示用于演示目的的轮廓)