Blog Post Listing Spacing

[bstock98]

Hi Everyone,

I am experiencing some trouble with spacing on my Blog page. The title of the post is overlapping with the content section and I need there to be even space for all of the posts on the listing page. Here is a screenshot of what it looks like below:

https://blog.signumbiosciences.com/thescienceofstayinghealthy

If anyone knows what I need to edit in the coding of this blog page to allow the title and content to be spaced appropriately, I would greatly appreciate it. Hopefully this is a simple fix. Also please let me know if you want to look at any of the modules for this page. I can attach them in a responce.

Thank you for your help!

-Ben S.

[dennisedson]

@bstock98, a link to the page would be helpful 

without that, i would suggest (blindly) adding flex to the item and add padding

example pen here

[bstock98]

Here is the link to the page https://blog.signumbiosciences.com/thescienceofstayinghealthy

I will take a look to see if adjusting the flex and width will work.

Thank you for the suggestion

-Ben S.

[dennisedson]

@bstock98,

the floats are causing the issue.  you can remove those and add display: inline-block to .entry-title-wrapper and .post-body and fiddle wih the widths, but I would still recommend the flex method. 

in your template, put those two divs inside a container div and apply flex to the container 

<style>
.flex{display: flex}
@media (max-width: 500px){
  .flex{
    flex-direction: column
  }
}
</style>
<div class="flex">
  <div class ="entry-title-wrapper">
      <!-- content -->
  </div>
  <div class="post-body">
     <!-- content -->
  </div>
</div>

[dennisedson]

@bstock98, did you get this working?

[bstock98]

@dennisedson I haven't been able to get it to work yet. I am not very versed in coding, especially for hubspot, but I'm trying to get the hang of it. Where would it be best to insert those div segments into the blog page? Should I make another module to add to the page template, or should I insert this into one of the existing modules? Here is the main section of the blog page template that I am working with for reference. Please let me know if there is anything else that would help.

Thank you I appreciate the help,

Ben S.

[dennisedson · Accepted solution]

.entry-title-wrapper.hi @bstock98, 

with the blog content hightlighted, you should see on the right sidebar an option to edit the listing layout .

within that you should look for 

something like this

{% for content in content %}

directly under that, you will see the post container.  yours will look like 

<div class="post-item">
  <div class="post-header">
     <!-- this contains your share button -->
  </div>
  <div class="entry-title-wrapper">
     <!-- this contains your title and date -->
  </div>
  <div class="post-body clearfix">
     <!-- this contains your summary -->
  </div>
</div>

what you need to do is take the second and third divs inside the post-item container and put them inside a parent div so it would look like this:

<div class="post-item">
  <div class="post-header">
     <!-- this contains your share button -->
  </div>

  <div class="listing-inner-wrapper">
    <div class="entry-title-wrapper">
       <!-- this contains your title and date -->
    </div>
    <div class="post-body clearfix">
       <!-- this contains your summary -->
    </div>
  </div>

</div>

Now, in your stylesheet,  search for .entry-title-wrapper.

remove the float: left

change the width to 33%

then, search for .post-body.clearfix.

remove the float: right

remove the width

(i saw both of .entry-title-wrapper and .pos-body-clearfix twice in the css so make sure to change both

Add the following:

.listing-inner-wrapper{ 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
} 
@media (max-width: 500px){ 
  .listing-inner-wrapper{ 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -ms-flex-direction: column; 
    flex-direction: column 
  }
   .entry-title-wrapper{
    width: 100%;
  }
} 

 Hopefully, that gets you somewhere.  It might be good to reduce the size of the h2s for mobile devices as well.

And remember, you have a revision history so you can go back to an older version if something doesnt work out right 🙂

[bstock98]

@dennisedson You're the best. That spaced everything properly and looks much, much better now. I really appreciate the help.

Thank you again,

Ben S.