CSS selectors to target blog page padding

Hi - looking for any tips on which CSS selectors to target to achieve similar padding around and between blog posts like this site example and which default layout is being used: https://jhannahjournal.com/

Thank you!

Can you share link to blog page on your site?

@tuanphan - thanks so much for checking in! This website is still in design phase and not yet in development on Squarespace. 

When you have url you can share, we can check problem easier

On 4/16/2024 at 3:13 AM, tuanphan said:

When you have url you can share, we can check problem easier

Hi @tuanphan - here is the link and password:
 

Blog: https://veronicatuckerthelabel.com/blog
Password: hello

Looking to achieve similar padding around and between blog posts like this Squarespace site example: https://jhannahjournal.com/

Thank you!

On 5/7/2024 at 6:54 AM, estormstudio said:

Hi @tuanphan - here is the link and password:
 

Blog: https://veronicatuckerthelabel.com/blog
Password: hello

Looking to achieve similar padding around and between blog posts like this Squarespace site example: https://jhannahjournal.com/

 

Thank you!

You mean padding on left/right of screen? You can try this to Website > Website Tools > Custom CSS

@media screen and (min-width:992px) {
.blog-alternating-side-by-side {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    max-width: 900px !important;
}
}

6 hours ago, tuanphan said:

You mean padding on left/right of screen? 

@tuanphan - yes, thank you! Is it also possible to stack the blog thumbnail image and the header / metadata beneath it? Like the screenshot attached? Thank you.

Quite complex to achieve this

You try this to Custom CSS

@media screen and (min-width:768px) {
div.blog-alternating-side-by-side-wrapper article {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

div.blog-alternating-side-by-side-wrapper article>section {
    width: 100% !important;
    margin-bottom: 10px !important;
}

.blog-alternating-side-by-side-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 50px;
}
}

On 5/10/2024 at 11:58 PM, tuanphan said:

Quite complex to achieve this

Thank you, @tuanphan - it's a start! The image and title stack now. Thank you!