How to reduce space between sections on my blog page

Site URL: https://www.relativelygenealogy.com/blog

I have too much vertical space between the text section and the blog section.  I'd appreciate some help with this and I'd like the spacing to look similar to the contact page.

thanks!

8 hours ago, Eventide said:

Site URL: https://www.relativelygenealogy.com/blog

I have too much vertical space between the text section and the blog section.  I'd appreciate some help with this and I'd like the spacing to look similar to the contact page.

 

thanks!

Hi, add this code to custom css (Design > Custom CSS) and let me know how it goes 🙂

.tweak-blog-basic-grid-width-inset .blog-basic-grid {
  margin-top:-60px;
}

Hi Jia-

Thanks so much. My skills in CSS are limited so I don't think I ever would have gotten the first part. Everything looks great on desktop but not great on mobile. Depending on what device I am looking at it might be too close to close to the blog posts below or too high. Any suggestions?

14 hours ago, Eventide said:

Hi Jia-

Thanks so much. My skills in CSS are limited so I don't think I ever would have gotten the first part. Everything looks great on desktop but not great on mobile. Depending on what device I am looking at it might be too close to close to the blog posts below or too high. Any suggestions?

We can use media queries so the margin will only apply on desktop. You can try replacing the previous code with this and let me know what you think 🙂

.tweak-blog-basic-grid-width-inset .blog-basic-grid {
  @media screen and (min-width:768px) {
    margin-top:-60px;
  }
}

It helps. The placement is consistent but still too far away on mobile view. Any suggestions?

The contact page title is similarly distant on mobile view also. So I may need to apply the same to that page.

12 hours ago, Eventide said:

It helps. The placement is consistent but still too far away on mobile view. Any suggestions?

The contact page title is similarly distant on mobile view also. So I may need to apply the same to that page.

Add this code, it's for the margin on mobile view.

/** FOR MOBILE **/
.tweak-blog-basic-grid-width-inset .blog-basic-grid {
  @media screen and (max-width:767px) {
    margin-top:-35px !important;
  }
}

The mobile view should look like this:

The contact page's mobile view looks great on my end, but here's the code for if you'd like to adjust it (just edit the value (5px) to what you prefer.

@media screen and (max-width:767px) {
  .sqs-block.form-block.sqs-block-form {
    margin-top: -5px;
  }
}

Let me know how it goes 🙂

Jia  - I don't know if you are still following this, but this solution is no longer working at least for desktop. Not sure what changed. Hoping I can enlist your help again.

thx.

Nevermind. I figured it out - I changed the width from inset to full. All good now.,