Increase content width on a single page

  • Resolved ceol

    (@ceol)


    7 years, 11 months ago

    Hi.
    I see in the forum there’s a method to change content width globally for posts. How to do this just for a single page?
    Great theme thanks…

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

    (@carbybarby838)

    7 years, 8 months ago

    Hello,

    Here is how to change content width for a single page (disclaimer, I am not a web developer):

    Step 1
    Find the page ID of the page you want to edit. Instructions to find it here.

    Step 2
    Add this custom CSS, replacing the ## with the page ID:

    div.section-inner.post-##.page.type-page {
	width: 200px;
}

    Edit: replace 200px with whatever width you want your content to be (sorry I’m writing this while sleepy)

    Peace

    • This reply was modified 7 years, 8 months ago by carbybarby838.
    Thread Starter ceol

    (@ceol)

    7 years, 8 months ago

    carbybarby838,
    Thanks very much for this. While this works for reducing, unfortunately there seems to be a max-width constraint.

    I had previously found somewhere on this forum the following which increased width globally:

    .section-inner.medium { max-width: 840px; }
    .section-inner.thin { max-width: 900px !important; }

    .section-inner .section-inner {
    width: 100%;
    }

    Have tried to adapt it with your page id code but without success. Any ideas much appreciated.
    Brilliant tip on the page id – Thanks…

    carbybarby838

    (@carbybarby838)

    7 years, 8 months ago

    There might be a neater way to do this but see if this works:

    .section-inner.post-##.page.type-page.status-publish.hentry.missing-thumbnail > div {
	max-width: 1000px;
}

.section-inner.post-##.page.type-page.status-publish.has-post-thumbnail.hentry.has-thumbnail > div {
	max-width: 1000px;
}

    Disclaimer: I’m not a professional web developer

    • This reply was modified 7 years, 8 months ago by carbybarby838. Reason: Realized styling "p" was unnecessary
    • This reply was modified 7 years, 8 months ago by carbybarby838. Reason: Realized second selector could be shortened
    Thread Starter ceol

    (@ceol)

    7 years, 8 months ago

    carbybarby838,
    Excellent.

    .section-inner.post-##.page.type-page.status-publish.hentry.missing-thumbnail > div {
    max-width: 1000px;
    }

    .section-inner.post-##.page.type-page.status-publish.has-post-thumbnail.hentry.has-thumbnail > div {
    max-width: 1000px;
    }

    Works perfectly even using % instead of px.
    Don’t know how you arrived at the solution, I can’t make sense of it.
    Thanks a million…

    Thread Starter ceol

    (@ceol)

    7 years, 7 months ago

    Resolved thanks

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

The topic ‘Increase content width on a single page’ is closed to new replies.