Search code examples
htmlcssblogs

Increase Title Margin in Mobile view only

Everything looks great on desktop. But in the mobile view I'm seeing blog titles overlapping the blog teasers on my blog page. I am trying to add margins to the bottom of the blog post titles for the mobile view only: enter image description here

I've tried adding this css:

@media all and (max-width: 1000px) and (min-width: 700px) { .entry-container .entry-title { margin-bottom:15px; }}

but that doesn't seem to do anything.

Here is a copy of the div with its classes:

<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&amp;d=mm&amp;r=g" srcset="https://secure.gravatar.com/avatar/895fdbf242e920205673491b0b5b2b80?s=92&amp;d=mm&amp;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>

Solution

  • Just review the provided Test link, the issue is not related to Title or Responsive.

    Actually margin-top: -60px!important; CSS added on .entry-content and margin-bottom: 65px; CSS on .entry-header.

    Step 1:

    Remove margin-top: -60px!important; CSS from .entry-content.

    Step 2:

    Change margin-bottom: 65px; CSS to margin-bottom: 0; on .entry-header.

    Will resolve your issue on Both Desktop and Responsive versions. Thank You