Change text width in individual posts, but keep sidebar aligned with text

  • Resolved carrie_roddenberry

    (@nevenagrubac)


    5 years, 9 months ago

    Hi everyone,

    I love my Kale theme, but the post width is to wide for me.
    I need to keep the column narrower so it’s easier to read.

    I tried EVERY offered solution from the WP forum, but non works in my case.
    This is exactly what I wish to do:

    I want my homepage to stay as it is, but I wish to change the width of every individual post. I want my headline, post text, all media (pictures/video) and sidebar to stay together and centered, with only text+media getting narrower. So, no change to the sidebar width. Also, no change to the banner and the menu bar. I just want to make the text easier to read by making lines shorter, with the sidebar staying close at the right side of the text. This code helped a bit:

    .single-content {
    max-width: 600px;
    margin: 0 auto;
    }

    …BUT it only changed the width of the text/media, while the sidebar stayed on the far right, so there was a huge blank margin between the sidebar and the text. If the mentioned code could be adapted to leave the sidebar and the text together and centered, that would be great. Also, this code didn’t affect the headline, so the headline stayed aligned to the left, while the text went toward the center while being narrowed.

    I’m sorry if I sound confusing. I’ll gladly answer any additional questions.

    Thank you so much!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi there,

    Thank you for getting in touch with us.

    The above code set the maximum width of single post content to 600px and center it. If you want to center align all text you can change it like this:

    .single-post .main-column .post .single-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

    The max-width 600px applies to the content of single post but the width of wrapped column is still 75% so the sidebar stays in the same position. The only way to move the sidebar closer to the post content is to change its width like this:

    @media (min-width: 992px) {
    .single-post .main-column {
        width: 60%;
    }

    .single-post .sidebar {
        width: 40%;
    }
}

    Kind regards

    Hi Nevena. ??

    Thank you for contacting us and for using our theme, we appreciate it.

    If I understood you right, please try to add this CSS:

    @media (min-width: 1024px) {
	.single-post .main-column.col-md-9 { width: 65%; margin-left: 5%; }
}

    Feel free to play with the percentage values.

    If this is not what you wanted, could you please make a screenshot and then mark what exactly you want to be narrower and then upload it to some picture sharing website like https://prnt.sc/

    Hope this helps.

    УБР, ?ако интересантан са?т. ??

    Thread Starter carrie_roddenberry

    (@nevenagrubac)

    @jarektheme
    Thank you for your time, but that didn’t work for me.

    @siniplyrathemes
    Perfect!
    Thank you, that did exactly what I wanted.
    Hvala najlep?e, drago mi je da vam se svi?a sajt.
    Uvek ste dobrodo?li! ??

    I appreciate both your answers and you help!

    Glad that one of the solutions worked. ??

    If you need any assistance in the future, just open a new thread.

    Could you please mark this one as “Resolved”?

    Thank you for your time!

    Thread Starter carrie_roddenberry

    (@nevenagrubac)

    Of course!

    Thanks again.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change text width in individual posts, but keep sidebar aligned with text’ is closed to new replies.