我该如何纠正响应式媒体查询？

Question

我正在尝试纠正WordPress网站上的一些响应问题。

在移动视图中看起来像这样：

然后，我将以下代码添加到我的子主题的CSS中：

@media only screen and (max-width: 768px) {
    .header-filter, .background-image {
		height: 85%;
		
	}
}
@media only screen and (max-width: 768px) {
     .hestia-title {
		height: auto;
		
	}
}

现在，它看起来像这样：

因此，尽管标题图像和标题似乎已调整大小以适合移动屏幕，但它与.blog-post div之间仍留有空隙，从而在其后面显示了首页图像（黑色空隙在其中）。

该网站的博客文章部分已经作为我下载的主题的一部分做出了响应，因此，如果可能的话，我需要缩小差距并提高.blog-post的位置以再次达到标题的底部。

有什么想法吗？

谢谢

Answer 1

首先检查此行是否在您的文件的部分中。 如果未在文件中添加此行，则首先在

中添加此行

'<< meta name =“ viewport” content =“ width = device-width，initial-scale = 1.0”>'

并检查您的响应主题。