Centering Blog Post

  • Resolved maybenot

    (@maybenot)


    4 years, 2 months ago

    Hi,

    I know Chaplin doesn’t have an option to center blog post (not page). And I read that adding css to do this can affect other elements.

    Because of this and not having sidebar, I tried many other free themes plus one paid one but I always end up with Chaplin. I just love everything about it except these two “issues”.

    It may not be ideal but I’m using this css to center blog post.

    `@media (min-width: 1025px) {
    .single-post .entry-content,
    .comments-wrapper { max-width:650px;
    margin:0 auto;}
    }

    Because I have increased font size, it’s a little too narrow. And I don’t know if I can just increase size as I see fit e.g from 650px to 730px or whatever.

    What I’m trying to find is what’s the best size (set up) I should go for with all devices in mind – perhaps have a cut-off point based on tablet which then takes effect on desktop too? (I think).

    Do you see any potential issue with the above code or can you suggest the best way to go about?

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @maybenot,

    The main issue you’ll run into is that any blocks set to a “Wide” or “Full” alignment in the block editor will break when you center the content column.

    Updating it the CSS work with those block alignments would require a lot of complicated changes in your child theme, and would be prone to break in future updates. The code you posted should be fine as long as you don’t use those block alignments, though.

    — Anders

    Thread Starter maybenot

    (@maybenot)

    Hi Anders,

    Thanks for your prompt response as always!

    I use blocks in pages only, not blog posts so it works for me.

    Thanks for confirming the above code is fine.

    From your response somewhere here, I saw:

    @media (min-width: 769px) and (max-width: 1024px) { /* CSS in here for tablet only */ }

    @media (min-width: 1025px) { /* CSS in here for desktop only */ }

    I’m guessing there’s a way to have the same effect on both devices (tablet and desktop) with one code? This just confuses me. I tried different combinations but with no luck.

    Thanks again!

    Theme Author Anders Norén

    (@anlino)

    Hi @maybenot,

    If you add the CSS like this:

    @media (min-width: 700px) { /* code goes here */ }

    …the CSS will apply to tablets in portrait orientation and all screens larger than that.

    — Anders

    Thread Starter maybenot

    (@maybenot)

    Superb!

    Thanks again for the wonderful theme and all your help ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Centering Blog Post’ is closed to new replies.