Reducing width of blog posts

Hi there,
Unwilling to mess with css directly like my younger, more reckless and time-rich self used to do, I’m trying to reduce the width of my blog posts.
I’ve attached an image. The image that tops the blog post is 825 pixels wide. You can see it looks a little odd, with a lot of white space to the right and left. Ideally I’d like to bring the width of the white space in so it frames the image and the text lines up with the left and right edges of the image.

I’d like to know what css element controls the width too please :slight_smile:

Hello there,

Sydney theme resizes down larger image becomes 830px in maximum width. To enable larger size as it is before upload, you can use the Simple Image Sizes plugin. Once activated, go to Settings menu and choose Media. Find the large-thumb row and set 99999 x 99999.

Regards,
Kharis

Hi Kharis, thanks for your reply.
I’m not sure if I was clear enough in my explanation. I don’t have a larger image. What I’d like is to make the page, the white space containing the blog post, narrower. I just don’t know which part of the style.css to edit to do that.

Thanks
Adrian

Hello Adrian,

I am sorry for being unclear. Please try adding this code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 992px) {

      .single-post .content-area.col-md-9 {
        max-width: 700px;
        float: none;
        margin-left: auto;
        margin-right: auto;
      }  
      
    }

Regards,
Kharis

1 Like

That’s done the trick. Thank you for your help, I really appreciate you getting back to me so promptly.

All the best
Adrian

You’re welcome Adrian!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis,
One further question. Should the above code you provided work for ‘Projects’? It’s worked for the pages I create but not the project pages. Should I paste it elsewhere? The website is adrianselby.com. I’m using the ‘Band’ child theme so I can make use of the Projects. You’ll see three along the top of the homepage. They aren’t affected by this css change and the page itself is a lot wider than the linebreak of the text.
Thanks
Adrian

Hello Adrian,

For single project pages, try this code:

    @media only screen and (min-width: 992px) {

      .single-projects .content-area.col-md-9 {
        max-width: 700px;
        float: none;
        margin-left: auto;
        margin-right: auto;
      }  
      
    }

Regards,
Kharis

1 Like

Hi,
Given there’s already css on the page for the posts, I’ve ended up with what I think is right (I don’t code sorry):

.mainnav li.current-menu-item > a,
.mainnav li.current-menu-ancestor > a {
color: #ffffff !important;
}

@media only screen and (min-width: 940px) {

  .single-post .content-area.col-md-9 {

    max-width: 850px;

    float: none;

    margin-left: auto;

    margin-right: auto;

  }

}
@media only screen and (min-width: 940px) {

  .single-projects .content-area.col-md-9 {
    max-width: 700px;
    float: none;
    margin-left: auto;
    margin-right: auto;
 }
}

It isn’t making a difference. On this page: https://www.adrianselby.com/thewinterroad/ there’s white space to the right. I’d like the white content space to be same width as the Posts.
Might I have got something wrong in the css above?

Thanks
Adrian

Hello Adrian,

Try adding this CSS code:

    @media only screen and (min-width: 992px) {
      .page #primary.content-area.col-md-9 {
        width: 100%;
      }
      .page .content-area .post-wrap {
        padding-right: 0;
      }
    }

Regards,
Kharis

1 Like

Perfect. Thank you once again!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis