Question

我目前正在努力使旧网站响应。 http://www.risumfeldt.dk/

当我在980px宽度以下的视口中查看时，水平滚动被激活，html / body / container保持在980px。

我已尝试在所有元素上强制内嵌宽度为200px，但页面仍处于拉伸状态，我感到茫然。有人能够发现问题吗？

问题是＃fp-boxes中的表格。正在Chrome浏览器的视口中进行测试，并且强制宽度没有刷新而没有更改页面宽度，然后将强制宽度重置为初始值。一切都在firefox＆＃39; vievport。

Answer 1

快速浏览一下网站，有一些问题。

问题1 - 购物车设置了margin-left，扩展了页面（style.css第88行）

.m-shoppingbasket {
  width: 295px;
  position: absolute;
  margin-left: 739px;
  top: 6px;
  background: #8bbeb7;
}

可能的解决方案 - 删除左边距并右移浮动并相应调整

问题2 - 功能框（fp-boxes）包含一个设置宽度为

的表

            <td style="width: 334px; height: 201px;" valign="top">...</td>
            <td style="width: 334px;" valign="top">...</td>
            <td style="width: 334px;" valign="top">...</td>

解决方案 - 删除绝对宽度并选择响应网格或仅设置百分比。我会从桌子上切换出来并排显示三个盒子......

您似乎还添加了媒体查询（style.css第733行）

你也可以通过创建一个响应式图像类来解决这个问题，以便特色促销根据表的大小缩小

.img-responsive {
    display:block;
    max-width:100%;
    height:auto
}

问题3 - 页脚文本容器设置为1000px宽度（style.css 610行）

.footer-container .footer {
  width: 1000px;
  height: 80px;
  margin: 0 auto;
  padding-top: 20px;
}

解决方案 - 删除宽度

可能还有其他一些问题，但这应该可以让你开始。

Answer 2

@media (max-width:980px) and (min-width:300px) { 
      #wrapperselector { 
        max-width: 200px; 
        margin: 0 auto;
        overflow-y: hidden;
      }
}

此外，我认为您没有显示所有代码。

如果你说你试图将所有元素强制为200px宽度;你可能做过类似的事情;

* {
  width: 200px;
}

这延伸了一切，所以不要这样做！

HTML / CSS未知元素拉伸页面

2 个答案: