Support » Theme: Kindergarten » How to widen the text area of a page

  • Is there a way to widen the text area within a full page display (no widgets) I’d like to be able to display an external database through the Kindergarten theme but the page area currently limits how much we could display. No matter how wide I stretch the view, the page text area seems to be limited to a maxium display area. Is there a way to widen this in CSS or any other method?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Is there a specific page that you want full width? It would be helpful to post a link to that page so we can see the page ID.

    The page(s) in question would display a the contents of a database plugin (Caspio) iFrame which will be on Member Only pages. I haven’t added any yet as the current page width of the Kindegarden template is so narrow as to be unusable.m

    It appears to me that the template is holding the right third of the page in reserve for widgets even if you are not displaying any and there is no way to display a full width page. You could look at https://www.tutors4kids.org/books/ as a page example.

    So every time you create a new page or post, it gets assigned a unique numeric ID, and that ID can be viewed if you do either a view source on the page in question, or inspect the page using a web debugger like Firebug or Chrome DevTools.

    In the case of the Books page, do a view source and do a search on the beginning of the body tag: <body. On that same line, you will see a number of classes defined for that tag, one of which is page-id-34. So the page/post ID for that page is 34.

    I should ask, how did you eliminate the sidebar? It doesn’t seem that the theme has any sort of special full-width template, and it appears that the max-width property of the page container was changed from 1000px to 1400px in the theme’s stylesheet. You should be aware that making changes directly to any of the theme’s files is not recommended. If the theme gets updated because of feature enhancements, bug fixes, or security patches, or if the theme has to be updated because of a change to the WordPress core, then your changes will be lost. The recommended procedure is to create a child theme and make your changes to copies of any PHP files that you want to modify, and to add your own CSS in the child theme’s style.css file.

    Getting back to the problem at hand, you are correct in saying that the space has been reserved for the widget area. Precisely, 30% of the content width has been set aside for the widget area while 70% of the content width has been set aside for the main content. So if you want the main content you stretch across the entire width of the page, you would add a CSS rule like this:

    .page-id-34 .content-area {
       width: 100%;
    }
    .page-id-34 .site {
       max-width: none;
    }

    The first rule allows the content to stretch across the area reserved for the sidebar. The second rule is optional, and allows the page content to expand as wide as possible, i.e., there is no limitation set on the width of the page. The .page-id-34 selector in both rules means that the rules will only affect the Books page. You can add these rules either to your child theme’s style.css file, or using Jetpack’s custom CSS option (Appearance → Edit CSS).

    Thanks very much. I’ll give that a try.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to widen the text area of a page’ is closed to new replies.