Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Change Blog Content Width


Recommended Posts

Edit blog post > Add Code Block > Add this code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

image.thumb.png.01f0b229381781537ab4b880ff6ac2bb.png

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

image.thumb.png.01f0b229381781537ab4b880ff6ac2bb.png

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
4 hours ago, ur272ct said:

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...