CSS响应变化宽度100％

Question

问题摘要：  您好，

我刚刚购买了Jomsocial + Template Socialize。我使用RSForm作为登陆页面。 我在左侧有一个图像，在桌面视图上有右侧的表格。

当我减少浏览器以模拟响应式视图时，文本位于图像下但宽度为50％。这是destopview所需的宽度。

所以我在/templates/socialize/css/template.css中添加一些行

@media (max-width: 480px) {
.div_image_homepage_right {
      width: 100% !important;
   }
}

但它不起作用。宽度保持50％而不是100％。我试过Chrome＆amp; Firefox浏览器。

请参阅屏幕截图以便更好地理解。

有人知道如何解决这个问题吗？

Answer 1

试试这个

@media only screen and (max-width : 480px) {
    .div_image_homepage_right {
      width: 100% !important;
     }
    }

我认为根本问题是使用max-device-width vs普通旧max-width。使用＆＃34;设备＆＃34;关键字指的是屏幕的物理尺寸，而不是浏览器窗口的宽度。

例如：

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

对战

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. This will work on desktops when the window is narrowed.  */
}