Blog Grid & Individual Blog Page padding doesn't follow general Spacing settings

Site URL: https://www.holistichealthcorner.co.nz/mind

Hi there, I am desperate with finding out how to set the right spacing for my website and at the same time not destroy the look of my blog grid & blog pages. It seems like the blog spacing reaches differently to the website spacing settings. Page width is 1200px and site margin is 4vw.

• Challenge 1: blog page doesn't align the blog grid properly (width is on 'insert').

• Challenge 2: individual blog pages have added padding on the top (image on the left below), whereas my non-blog pages showcase the spacing correctly.

On 10/5/2020 at 7:02 PM, nowicluk said:

Challenge 1: blog page doesn't align the blog grid properly (width is on 'insert').

Add the following to Design > Custom CSS.

@media screen and ( min-width: 1188px ) {

  .page-section[data-section-id="5f3f439c570dba3f413fd10c"] .blog-basic-grid {
  
    padding-left: 0;
    
    }
    
  .page-section[data-section-id="5f3f439c570dba3f413fd10c"] .content-wrapper {
  
    margin-left: auto;
    max-width: 1100px; /* if Design > Site Spacing > Page Width (Max) changes */
                       /* update */
    padding-left: 4vw;
    padding-right: 4vw;
    
    }
  }

On 10/5/2020 at 7:02 PM, nowicluk said:

Challenge 2: individual blog pages have added padding on the top (image on the left below), whereas my non-blog pages showcase the spacing correctly.

Add the following to Design > Custom CSS.

.blog-item-wrapper article.entry {

  padding-top: 0;
  
  }

Let us know how it goes.

This worked perfectly! Thank you so much. How did you get the data-section-id? The Block Identifier doesn't show me.

Basically I would like to do the same for https://www.holistichealthcorner.co.nz/body and https://www.holistichealthcorner.co.nz/soul.

I also noticed that the mobile version has no padding anymore even though there should be one.

13 hours ago, nowicluk said:

I also noticed that the mobile version has no padding anymore even though there should be one.

I updated the CSS in previous post to only remove the padding on larger screens.

13 hours ago, nowicluk said:

Thank you so much. How did you get the data-section-id? The Block Identifier doesn't show me.

Basically I would like to do the same for

One thing you could do is remove [data-section-id="5f3f439c570dba3f413fd10c"] if you want the left padding to change on all blogs.

I found the data-section-id by using the browser inspector.

Thanks Thomas. The mobile version that has no padding on the left and right was related to challenge 1. On the desktop, it removed the padding but also it removed it on mobile. Basically I need no padding on desktop and padding on mobile.

I just noticed something. If you go to this page section...

...and get into Edit mode. Then on your blog click on the pencil.

Is the width set to Inset?

If so click on Full.

Save your changes.

Then comment out or remove the CSS related to padding on the left.

Does that line things up on the left for you and maintain a reasonable padding on desktop and mobile?

This is how it looks like now, mobile looks fine, desktop version does not align.

OK. Lets try one more version of the CSS. I updated my previous post.

On 10/5/2020 at 7:02 PM, nowicluk said:

It seems like the blog spacing reaches differently to the website spacing settings.

I noticed this as well. If one builds a page and then uses a summary block to get the blog items. That page layout spaces properly.

On a blog page the blog pretty much ignores the site spacing as far as I can tell. Hence our trying to wrangle it into place with some CSS.

Thank you! You solved challenge no. 1!!! 🙂

Now, challenge 2. Desktop works perfectly, but now the mobile version is without padding.

Replace your CSS...

.blog-item-wrapper article.entry {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0
}

...with...

.blog-item-wrapper article.entry {

  padding-bottom: 0;
  padding-top: 0;
  
  }

@media screen and ( min-width: 1188px ) {

  .blog-item-wrapper article.entry {
  
    padding-left: 0;
    padding-right: 0;
    
    }
  }

Let us know how it goes.

Thank you a lot! It all worked out perfectly.