How do I fix the line-spacing for my blogposts on my blog?

Question

This is what my code looks like. I'm looping through each post to make it show up on my website.

<div class="blog-container">
    <div class="posts">
        {% for post in site.posts %}
            <div class="post-preview">
                <h2 class="post-title hover-underline-animation"><a href="{{ post.url }}" class="blue">{{ post.title }}</a></h2>
                <p class="post-date">{{ post.date | date: "%B %d, %Y" }}</p>
                <div class="post-summary">
                    {{ post.summary | strip_html }}
                </div>
            </div>
        {% endfor %}
    </div>                  
</div>

This is what the output currently looks like:

This is what I'd like the posts to look like:

I'm not sure how to make the spacing how I want it to be, while remaining constant when I resize the page. I'm a complete beginner trying to use Jekyll. All help is greatly appreciated!

Answer 1

You can play around with padding and margin to achieve your result. I have below code which uses pure HTML and CSS but in Jekyll also you'll be able to attach style tag to your pages and achieve the same result.

<style>
    *{
    margin: 0;
    padding: 0;
    }

      .blog-container {
        display: grid;
      }
      
      .post-preview {
        padding: 20px;
        text-align: left;
      }
      
      .post-title {
      padding-bottom: 1px;
      margin-bottom: 1px;
      }
      
      .post-date {
        font-style: italic;
        margin-bottom: 30px;
      }
      a{
      text-decoration: none;
      }
      
    </style>

<div class="blog-container">
    {% for post in site.posts %}
        <div class="post-preview">
            <h2 class="post-title hover-underline-animation"><a href="{{ post.url }}" class="blue">{{ post.title }}</a></h2>
            <p class="post-date">{{ post.date | date: "%B %d, %Y" }}</p>
            <div class="post-summary">
                {{ post.summary | strip_html }}
            </div>
        </div>
    {% endfor %}
</div>

You ca use the below code for reference.

<style>
*{
margin: 0;
padding: 0;
}

  .blog-container {
    display: grid;
  }
  
  .post-preview {
    padding: 20px;
    text-align: left;
  }
  
  .post-title {
  padding-bottom: 1px;
  margin-bottom: 1px;
  }
  
  .post-date {
    font-style: italic;
    margin-bottom: 30px;
  }
  a{
  text-decoration: none;
  }
  
</style>

<div class="blog-container">
  <div class="post-preview">
    <h2 class="post-title hover-underline-animation"><a href="url1" class="blue">Title: Lorem Ipsum has been the industry's standard</a></h2>
    <p class="post-date">01.01.2023</p>
    <div class="post-summary">
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
    </div>
  </div>
  <div class="post-preview">
    <h2 class="post-title hover-underline-animation"><a href="url1" class="blue">Title: Lorem Ipsum has been the industry's standard</a></h2>
    <p class="post-date">01.01.2023</p>
    <div class="post-summary">
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
    </div>
  </div>
</div>

Hope this helps

Answer 2

I don't know how your CSS classes are setup, but you can easily achive it by adding: padding-top: 16px and padding-bottom: 16px (adjust the px value as you please) to your post-preview class.

Answer 3

Try this:

*Just go through the CSS box model

         *{
         margin:0;
         font-family:sans-serif;
         }
         .post-title{
         font-weight: 500;
         font-size: 32px;
         }
         .post-title a{
         text-decoration:none;
         color: #33b8ee;
         }
         .post-date{
         color: #33b8ee;
         font-size: 28px;
         margin: 10px 0;
         }
         .post-summary{
         font-size: 28px;
         }
         .post-preview{
         margin-bottom:60px;
         }

<div class="blog-container">
         <div class="posts">
            <div class="post-preview">
               <h2 class="post-title hover-underline-animation"><a href="{{ post.url }}" class="blue">Title: Lorem ipsum dolor sit amet</a></h2>
               <p class="post-date">01.01.2023</p>
               <div class="post-summary">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
               </div>
            </div>
            <div class="post-preview">
               <h2 class="post-title hover-underline-animation"><a href="{{ post.url }}" class="blue">Title: Lorem ipsum dolor sit amet</a></h2>
               <p class="post-date">01.01.2023</p>
               <div class="post-summary">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
               </div>
            </div>
         </div>
      </div>