Adding Spacing to Center a Side-by-Side Blog Layout

Site URL: https://www.thevisualnarrative.co/blog

Hi Squarespace Community- 

I've been trying to figure out how to center my Side-by-Side Blog Layout for the past couple hours and can't figure it out!

I would love to find a solution that's built into the Squarespace interface already as I'm not well-versed in coding.  

Thanks!

It looks like you solved this?

On 2/7/2021 at 1:11 AM, tuanphan said:

It looks like you solved this?

Hi @tuanphan!

I have this same issue, but can't find an answer anywhere. Can you help me?

Thanks in advance!

11 hours ago, JustLucas said:

Hi @tuanphan!

I have this same issue, but can't find an answer anywhere. Can you help me?

Thanks in advance!

Hi. Can you share page url? We can help easier

On 6/17/2021 at 5:05 AM, tuanphan said:

Hi. Can you share page url? We can help easier

Hi @tuanphan, thanks for replying!

Page URL is https://lucasfromyoutube.com/filmmaking-gear

Add to Design > Custom CSS

/* blog */
.tweak-blog-side-by-side-text-alignment-left .blog-side-by-side {
    padding-left: 10vw;
    padding-right: 10vw;
}
.blog-item-text {
    width: 100% !important;
}

On 6/19/2021 at 10:47 AM, tuanphan said:

Add to Design > Custom CSS

/* blog */
.tweak-blog-side-by-side-text-alignment-left .blog-side-by-side {
    padding-left: 10vw;
    padding-right: 10vw;
}
.blog-item-text {
    width: 100% !important;
}

 

Thank you @tuanphan! 

I have one more question that I hope you can help me with. Do you know how I can display side by side blog of that same page on mobile? Right now it shows every title under the thumbnail rather than next to the thumbnail when you visit the page on mobile. So, to be clear... I want the titles on the blog page to show next to the thumbnails when viewing the page on mobile.

Also is there a CSS code to adjust the text size of the titles? Can't find it in "Format".

Thanks in advance!

10 hours ago, JustLucas said:

Thank you @tuanphan! 

I have one more question that I hope you can help me with. Do you know how I can display side by side blog of that same page on mobile? Right now it shows every title under the thumbnail rather than next to the thumbnail when you visit the page on mobile. So, to be clear... I want the titles on the blog page to show next to the thumbnails when viewing the page on mobile.

Also is there a CSS code to adjust the text size of the titles? Can't find it in "Format".

Thanks in advance!

Add to Design > Custom CSS

/* Mobile blog side by side */
@media screen and (max-width:767px) {
.blog-side-by-side .blog-item.is-loaded {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.blog-side-by-side.collection-content-wrapper {
    padding-left: 5vw;
    padding-right: 5vw;
}
section.blog-item-summary {
    width: 50%;
}
section.blog-image-wrapper {
    width: 48% !Important;
    margin-right: 2% !important;
}
section.blog-item-summary * {
    font-size: 16px;
    line-height: 22px !important;
}
}