When viewing my blog page on mobile, I noticed that the titles of my blog posts are overlapping with the teasers. To fix this issue, I attempted to add margins to the bottom of the post titles specifically for mobile: https://i.stack.imgur.com/BHi3C.png
Here is the CSS code I tried:
@media all and (max-width: 1000px) and (min-width: 700px) { .entry-container .entry-title { margin-bottom:15px; }}
Unfortunately, it seems like this solution did not have any effect.
Below is a snippet of the HTML structure with its corresponding 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&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>