Change Blog Content Width

Site URL: https://www.jeremiahlam.com

Is it possible to change the width of a blog post on Rally 7.0?

Yes, in style settings but not without changing the width of all pages on the site. There may be code to target the blog however. 

Edit blog post > Add Code Block > Add this code

<style>
  @media screen and (min-width:641px) {
  main#page {
    max-width: 50%;
}
  }
</style>

Hello, 

I have the same question as Nataniel; I'd like my individual blog posts on desktop to be more narrow. 
@tuanphanI've tried to add your code to a blog post, but it's not working for me.  Any chance you can help out? I am on Rally 7.0

Thank you, 

16 hours ago, Samir_Omri said:

Hello, 

I have the same question as Nataniel; I'd like my individual blog posts on desktop to be more narrow. 
@tuanphanI've tried to add your code to a blog post, but it's not working for me.  Any chance you can help out? I am on Rally 7.0

Thank you, 

Can you share link to blog post? We can check easier

2 hours ago, tuanphan said:

Can you share link to blog post? We can check easier

Yes sure, it's actually for all individual blog post on my site, but this is an example: https://www.palmsandbricks.com/blog/casa-mia-trancoso

On 11/14/2020 at 5:25 PM, Samir_Omri said:

Yes sure, it's actually for all individual blog post on my site, but this is an example: https://www.palmsandbricks.com/blog/casa-mia-trancoso

Add to Home > Design > Custom CSS

.Main--blog-item .Main-content {
    max-width: 100%;
    padding-left: 1vw;
    padding-right: 1vw;
}

Thank you @tuanphan , it worked!

Can I ask one more thing though? Logically it now also narrowed the blog post content when I'm reading on a mobile device, but my intention was to only have it more narrowed on desktop devices. 
Is it possible for the content on mobile device to still be full width? 

Thanks again 🙂

21 hours ago, Samir_Omri said:

Thank you @tuanphan , it worked!

Can I ask one more thing though? Logically it now also narrowed the blog post content when I'm reading on a mobile device, but my intention was to only have it more narrowed on desktop devices. 
Is it possible for the content on mobile device to still be full width? 

Thanks again 🙂

@media screen and (min-width:641px) {
.Main--blog-item .Main-content {
    max-width: 100%;
    padding-left: 1vw;
    padding-right: 1vw;
}
}

Thank you! 🙂

Hi @tuanphan — I'm trying to do the same thing, but don't seem to be able to get it working?

We're on version 7.0– Montauk family (Om template

https://www.worldaeropresschampionship.com/news/meet-our-team-whos-behind-the-wac

On 5/6/2021 at 12:11 PM, TimWilliams said:

Hi @tuanphan — I'm trying to do the same thing, but don't seem to be able to get it working?

 

We're on version 7.0– Montauk family (Om template

https://www.worldaeropresschampionship.com/news/meet-our-team-whos-behind-the-wac

Add to Design > Custom CSS

/* Blog content width */
body.collection-type-blog.view-item div#canvas {
    max-width: 100% !important;
    padding-left: 5px;
    padding-right: 5px;
}

Hey @tuanphan can you help me with a similar issue?

I want to be able to change the blog posts section width, but there's no option to change that in the squarespace interface.

Here's the website 
password: 123456

6 hours ago, vinnycustodio said:

Hey @tuanphan can you help me with a similar issue?

I want to be able to change the blog posts section width, but there's no option to change that in the squarespace interface.

Here's the website 
password: 123456

I don't see blog page. Can you share link to a blog post?

12 hours ago, tuanphan said:

I don't see blog page. Can you share link to a blog post?

Not the post itself, but the area were it lists the blog posts 

👇 here, squarespace gives me only two options here, indented or full-width, and I don't want to change the whole website margin just to affect this area.

On 6/9/2021 at 4:08 AM, vinnycustodio said:

Not the post itself, but the area were it lists the blog posts 

👇 here, squarespace gives me only two options here, indented or full-width, and I don't want to change the whole website margin just to affect this area.

Add to Design > Custom CSS

/* Blog width */
@media screen and (min-width:768px) {
.blog-single-column--wrapper {
    width: 53% !important;
}
}

It worked, but the content is moving to the left side of the website instead of being centered, any other line to add maybe?

Thanks a lot for the help btw!

3 hours ago, vinnycustodio said:

It worked, but the content is moving to the left side of the website instead of being centered, any other line to add maybe?

Thanks a lot for the help btw!

Use this

/* Blog width */
@media screen and (min-width:768px) {
.blog-single-column--wrapper {
    width: 53% !important;
	margin-left: auto;
	margin-right: auto;
}
}

Having the same problem :(  running Tudor.  Thanks in advance

4 hours ago, ur272ct said:

Having the same problem :(  running Tudor.  Thanks in advance

 

Use above code. If it doesn't work, can you sharel ink to blog post on your site?

here's an example: https://thesmashcake.com/noblog/songs-to-make-babies-dance

4 hours ago, ur272ct said:

here's an example: https://thesmashcake.com/noblog/songs-to-make-babies-dance

 

Change both post content + side bar or post content only?

I want to keep the sidebar but make the content column wider.  Thank you so much

17 hours ago, ur272ct said:

I want to keep the sidebar but make the content column wider.  Thank you so much

 

Add to Design > Custom CSS

/* Blog content width */
.tweak-show-blog-item-sidebar .main-content.blog-view-item {
    max-width: 100% !important;
}

OMG  thank you so much!!!