Home>Support>Increase margins on posts? And 2 other questions

Increase margins on posts? And 2 other questions

Hi –
I have three questions, hopefully all simple.

1) I would like to increase the margin size of my posts. The blocks of print seem too wide for easy reading, and they would look better with more white space on either side. I realize that I could do this by using Page Builder on each individual post, but I’d really like to just make a global change for all posts so that I can write them quickly without worrying about styling.

2) Content font size. I understand how to change this in the customization options, but all I wanted was to increase the font size on blog posts. When I increased the content font size in that main “appearance – customization” menu, lots of other content got bigger at the same time. (For example, the quote on my home page: betsysharp.com )Can you tell me the code needed to only increase the font size of post content? And also can you remind me where to put that code, and tell me if that change would require me to create a child theme?

3) Featured images for blog posts: When I set a featured image, it shows up nicely when you navigate to the permalink for that particular post. However, if you simply go to betsysharp.com/blog, the featured image is just a tiny thumbnail at the left. Is it possible to have that featured image show up full-size at the top of the blog post if someone navigates to betsysharp.com/blog?

Thanks very much for your help.

URL: http://betsysharp.com/blog

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi Betsy

    Sure.

    1. Looks like you might have adjusted your blog layout. If you still need to change widths then add the following to Appearance > Custom CSS:

    /* Blog */
    
    article.post.post-with-thumbnail-icon .entry-thumbnail, article.page.post-with-thumbnail-icon .entry-thumbnail {
      width: 11.68%;
    }
    
    article.post.post-with-thumbnail-icon .entry-main, article.page.post-with-thumbnail-icon .entry-main {
      width: 84.41%;
    }
    

    Ideally, whatever percentage you subtract off the second selector needs to be added to the first percentage. The first selector is the column with the featured image in it, the second is the main content column.

    2. Try the following under Appearance > Custom CSS:

    /* Content */
    
    .entry-content p, .entry-content ul, .entry-content ol {
    font-size: 16px;
    }
    

    3. Right now you have Featured Image Size set to Thumbnail, this setting is under Appearance > Theme Settings > Blog. If you change this we’ll need to re-look at the CSS for question one.

    Let us know how this all goes.

  2. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    So for question 3, if you change back to full size featured image, don’t use the CSS from question 1. In that case you’ll need to rather use:

    /* Blog */
    
    .blog #primary, .single #primary {
      width: 71.287%;
    }
    
    .blog #secondary, .single #secondary {
      width: 23.762%;
    }
    

    Whatever is subtracted from #primary should ideally be added to #secondary.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More