Jump to content

Blog post alignment

Recommended Posts

  • Replies 3
  • Views 751
  • Created
  • Last Reply

As inspecting the page is disabled this is a bit of a guess but try setting the left and right margins to 0. That might fix it depending on the parent's display properties.

Hope this helps and good luck

 

Link to comment

Thanks for this.

It's as I suspected the parent of the element you want to center has the following css, which creates a "container" with 3 columns of equal width (the bold part of the code snippet)

.blog-basic-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-column-gap: 30px;
    grid-row-gap: 100px;
    grid-auto-rows: min-content;
}
This results in the layout below.

image.thumb.png.c703de941889cee750b3283cc3029523.png

 

To achieve the layout below, you will need to add to the css the relating to that specific <article> element. This should do the trick:

.blog-basic-grid > article {
grid-column: 2/3;
}
However there might be subsequent issues if you were to add additional <article> elements at a later stage. Also the above code snippet might well cascade throughout the whole site, which might not be what you want, so best to check other pages. (I'm not a squarespace expert, so am not familar with the code base)

Hope this is of some help. Good luck.

 

image.thumb.png.f35b216db053334f10c05fffe258833b.png

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.