Html Wordpress:Mobile view无法正常工作|使网站对手机友好

我有一个基于wordpress的网上商店，主题是“Mystile”

我用自己的HTML和CSS代码创建了许多页面，它们在计算机上，在每个浏览器和显示大小上都非常好。 但是这个主题的自动移动视图显示了所有自我编码的东西

例如： 我想在主页上用一条简单的线分隔一些图片，这些图片放在彼此下面。 因此，我使用了如下HTML代码：

<div style="position: relative; bottom: 10px;">___________________________________________________________________________________________________________________</div>

___________________________________________________________________________________________________________________

这条线的长度正好使分离看起来很好。 但当然，网站的移动视图的宽度远小于桌面视图，所以这条分隔线在智能手机上看起来很糟糕

在其他主题移动视图中，您可以防御性地注意到视图的定义宽度，因此我的分隔线仅显示在移动视图中适合的长度。 在我目前的主题中，情况并非如此，移动视图似乎只是整个网站的一种转换，而不是一个清晰定义的框，在其中显示内容

我真的坚持在这里，因为网站已经完成编码，它看起来非常好的计算机上，在任何显示器大小等。 只有移动视图才是问题所在

---

我能做什么，应该做什么？

可以使用

标记，而不是使用带下划线的div

在下面的示例中，您可以调整容器的大小，并且线条的宽度始终为100%。您甚至可以使用CSS来设置线条的样式

div{
背景：#F7F7F7；
边框：1px纯黑；
填充：24px；
溢出：自动；
调整大小：水平；
宽度：200px；
}
img{
宽度：100%；
高度：自动；
}

你应该使用

而不是一个充满下划线的div？试着改用

。@Zander，你不应该用新问题替换原来的问题。所有给出的答案现在都无关紧要，尽管它们解决了你的问题。我建议撤消编辑并在新主题中提出新问题。接受解决您问题的答案也会帮助其他用户。好的，我理解，对不起。