仅在移动视图中增加标题边距
Increase Title Margin in Mobile view only
桌面上的一切看起来都很棒。但是在移动视图中，我看到博客标题与博客页面上的博客预告片重叠。我正在尝试将页边距添加到博客 post 标题的底部，仅适用于移动视图：
我试过添加这个 css:
@media all and (max-width: 1000px) and (min-width: 700px) { .entry-container .entry-title { margin-bottom:15px; }}
但这似乎没有任何作用。
这是 div 及其 类 的副本：
<div class="entry-container"><header class="entry-header"><h2 class="entry-title"><a class="entry-title-link" rel="bookmark" href="https://avt.850.myftpupload.com/why-we-became-financial-advisors/">Why We Became Financial Advisors</a></h2>
</header><div class="entry-content"><p>Would you hand over your house keys to a stranger? That’s often what it feels like to work with a financial advisor. Not only do …</p><p class="more-link-wrap"><a href="https://avt.850.myftpupload.com/why-we-became-financial-advisors/" class="more-link button text">Continue Reading <span class="screen-reader-text">about Why We Became Financial Advisors</span></a></p></div><footer class="entry-footer"><div class="alignleft"><img alt="" src="https://secure.gravatar.com/avatar/895fdbf242e920205673491b0b5b2b80?s=46&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/895fdbf242e920205673491b0b5b2b80?s=92&d=mm&r=g 2x" class="avatar avatar-46 photo" height="46" width="46" loading="lazy"></div><p class="entry-meta"><span class="entry-author">Written by:<br><a href="https://avt.850.myftpupload.com/author/kourtneykearney/" class="entry-author-link" rel="author"><span class="entry-author-name">Kourtney Kearney</span></a></span><span class="entry-date"><time class="entry-time">Published on:<br><span class="entry-time-date">September 2, 2021</span></time></span> <span class="entry-comments-link">Thoughts:<br><a href="https://avt.850.myftpupload.com/why-we-became-financial-advisors/#respond">No comments yet</a></span></p></footer></div>
您可以检查几项内容：
min-width: 700px 到 max-width: 1000px 不是移动视图。它通常是平板电脑大小。因此，如果您正在检查较小的屏幕尺寸，您的 CSS 可能无法应用。- 正如您在粘贴的代码片段中看到的那样，即使没有设置边距，正常的 div 也会一个接一个地正确定位，不会重叠。因此，请检查您是否在
.entry-container、.entry-header、.entry-title h2.entry-title 上设置了身高。这可能导致 header 溢出并因此与下面的内容重叠。
只需查看提供的测试 link，问题与 Title 或 Responsive.[=15= 无关]
实际上 margin-top: -60px!important; CSS 添加到 。entry-content 和 margin-bottom: 65px; CSS 添加到 .entry-header.
第 1 步：
从 .entry-content.
中删除 margin-top: -60px!important; CSS
第 2 步：
在 .entry-header.
上将 margin-bottom: 65px; CSS 更改为 margin-bottom: 0;
将解决您在桌面版和响应版上的问题。谢谢
桌面上的一切看起来都很棒。但是在移动视图中，我看到博客标题与博客页面上的博客预告片重叠。我正在尝试将页边距添加到博客 post 标题的底部，仅适用于移动视图：
我试过添加这个 css:
@media all and (max-width: 1000px) and (min-width: 700px) { .entry-container .entry-title { margin-bottom:15px; }}
但这似乎没有任何作用。
这是 div 及其 类 的副本：
<div class="entry-container"><header class="entry-header"><h2 class="entry-title"><a class="entry-title-link" rel="bookmark" href="https://avt.850.myftpupload.com/why-we-became-financial-advisors/">Why We Became Financial Advisors</a></h2>
</header><div class="entry-content"><p>Would you hand over your house keys to a stranger? That’s often what it feels like to work with a financial advisor. Not only do …</p><p class="more-link-wrap"><a href="https://avt.850.myftpupload.com/why-we-became-financial-advisors/" class="more-link button text">Continue Reading <span class="screen-reader-text">about Why We Became Financial Advisors</span></a></p></div><footer class="entry-footer"><div class="alignleft"><img alt="" src="https://secure.gravatar.com/avatar/895fdbf242e920205673491b0b5b2b80?s=46&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/895fdbf242e920205673491b0b5b2b80?s=92&d=mm&r=g 2x" class="avatar avatar-46 photo" height="46" width="46" loading="lazy"></div><p class="entry-meta"><span class="entry-author">Written by:<br><a href="https://avt.850.myftpupload.com/author/kourtneykearney/" class="entry-author-link" rel="author"><span class="entry-author-name">Kourtney Kearney</span></a></span><span class="entry-date"><time class="entry-time">Published on:<br><span class="entry-time-date">September 2, 2021</span></time></span> <span class="entry-comments-link">Thoughts:<br><a href="https://avt.850.myftpupload.com/why-we-became-financial-advisors/#respond">No comments yet</a></span></p></footer></div>
您可以检查几项内容：
min-width: 700px到max-width: 1000px不是移动视图。它通常是平板电脑大小。因此，如果您正在检查较小的屏幕尺寸，您的 CSS 可能无法应用。- 正如您在粘贴的代码片段中看到的那样，即使没有设置边距，正常的 div 也会一个接一个地正确定位，不会重叠。因此，请检查您是否在
.entry-container、.entry-header、.entry-titleh2.entry-title上设置了身高。这可能导致 header 溢出并因此与下面的内容重叠。
只需查看提供的测试 link，问题与 Title 或 Responsive.[=15= 无关]
实际上 margin-top: -60px!important; CSS 添加到 。entry-content 和 margin-bottom: 65px; CSS 添加到 .entry-header.
第 1 步：
从 .entry-content.
中删除margin-top: -60px!important; CSS
第 2 步：
在 .entry-header.
上将margin-bottom: 65px; CSS 更改为 margin-bottom: 0;
将解决您在桌面版和响应版上的问题。谢谢