Jump to content

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

Recommended Posts

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').

1825916713_ScreenShot2020-10-06at2_43_46PM.thumb.png.32cbe8992c19730afb057d65f4ea38ef.png

  • 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.

1702895518_ScreenShot2020-10-06at2_45.28PMcopy.thumb.png.8ad9ee6ef53ad4f39304a5f30657608d.png

Link to comment
  • Replies 10
  • Views 1.4k
  • Created
  • Last Reply
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

401917586_ScreenShot2020-10-07at11_53_09AM.thumb.png.1317d3765d90124893decc20118f5fee.png

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

266964391_ScreenShot2020-10-07at12_31_36PM.png.f02c84da3b581a3e8920abe454126a62.png

Is the width set to Inset?

403899386_ScreenShot2020-10-07at12_31_59PM.png.5e16684973eeda72ba367cd241f37e77.png

If so click on Full.

354801982_ScreenShot2020-10-07at12_32_27PM.png.4e03c00c78184a0c421f0c3183e31618.png

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?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.