仅在移动端视图增加博客标题底部外边距 解决标题与摘要重叠问题

问题原因 #

1. 你当前写的媒体查询规则生效范围是屏幕宽度700px~1000px，常规移动端设备宽度大多在768px以下，这个规则不会在移动端视图触发
2. 可能存在原有主题样式优先级更高的情况，导致你写的样式被覆盖

解决方案 #

优先调整媒体查询的生效范围，同时可以适当提升选择器优先级，避免样式被覆盖：

/* 仅767px及以下的移动端设备生效，可根据自己的移动端断点调整数值 */
@media only screen and (max-width: 767px) {
  .entry-container .entry-header .entry-title {
    margin-bottom: 15px !important;
  }
}

如果调整后还是没有效果，也可以直接给标题的外层容器.entry-header加底部边距，能避免margin塌陷带来的异常：

@media only screen and (max-width: 767px) {
  .entry-container .entry-header {
    margin-bottom: 15px;
  }
}

修改后清空浏览器缓存再查看效果即可，也可以通过浏览器开发者工具的元素检查功能，查看对应元素的样式生效情况，确认是否有其他样式冲突。

内容的提问来源于stack exchange，提问作者Kourtney Kearney