[Resolved] selectively set content width

Home Forums Support [Resolved] selectively set content width

Home Forums Support selectively set content width

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #264638
    Steven

    Hello. I’m developing a site for a fine artist. She’s not a blogger, and there is no need for sidebars, so I have chosen “content/no sidebar” for the default layout. I have also constrained the width of the content so as to have readable text line lengths. Today I learned that in some cases (“gallery” pages containing specific media in particular) she would like to have background info text to the left of the thumbnails. I figured out how to do a 1/3 x 2/3 column division using GP’s grid, but now the constrained content width, divided that way, looks ridiculously cramped. I can’t use a sidebar/content layout because the content in the “sidebar” will vary from gallery to gallery. Is there an easy way I can change the width of the content area selectively, only for the pages that need it?
    I hope that’s clear. The site currently only exists on my local machine so I can’t share a URL with you.

    Thank you.
    Steve

    #264640
    Leo
    Staff
    Customer Support

    Hi Steven,

    Are you able to provide a screenshot or an example of what you are trying to accomplish?

    #264667
    Steven

    Thanks, Leo. Let’s see if this works.
    For a page containing only text:
    https://www.dropbox.com/s/snvcinur253am4a/GP-content-only-constrained-width.png?dl=1

    For a page with background info and a gallery of images (using Envira Gallery):
    https://www.dropbox.com/s/eevx2kg5ix4f95r/GP-cramped-columns.png?dl=1

    Please let me know if there is some better way to embed images on this forum.

    #264671
    Steven

    In Customizer > Layout > Container I have it set to 1 container, 1200px wide.
    I would obviously like to keep the awesome responsive behavior Generate Press offers, just expand the container width on some pages.
    Steve

    #264683
    Leo
    Staff
    Customer Support

    Give the option Full Width Content in Page Builder Integration metabox a shot.
    It’s located in Edit Page, right side above Featured Image metabox.

    Let me know if this is what you are after.

    #264704
    Steven

    Hello, Leo. That’s didn’t seem to change the content width.
    I kept the layout as Content, and checked the full page check box.

    In addition, I tried this in the simple css box for the page:
    #content.site-content { width:2000px; }
    Which didn’t do what I wanted either and in addition pushed that whole section to the right.

    By the way – I should have mentioned (in case it’s relevant): the whole site consists of pages, not post, content type.
    Steve

    #264707
    Leo
    Staff
    Customer Support

    Check out this post: https://generatepress.com/forums/topic/how-to-set-different-container-widths-for-different-pages/

    See the first bullet of this post for more ways on finding the page ID: https://generatepress.com/forums/topic/hide-hooks-on-certain-pages/#post-264655

    Or you can add the code without the page ID element to the Simple CSS metabox below each page.

    Let me know.

    #264745
    Steven

    No luck. I need to stop staring at it for a while!
    I am using the Simple CSS metabox on a per-page basis, so I didn’t think I would need to specify the page ID (which might change anyway when I move out of the local development phase).

    Using Chrome’s inspector, it seems like div.entry-content { max-width: 1200px; } would do it, but it doesn’t.
    I’ll look at it again another day.

    Thank you.

    Steve

    #264747
    Leo
    Staff
    Customer Support

    Don’t give up just yet ๐Ÿ™‚

    If you are using the Simple CSS metabox for each page, try this CSS instead:

    .container.grid-container {
        max-width: 1200px;
    }

    Let me know.

    #265116
    Steven

    There is a container inside that one which I can’t figure out.
    The code for the page is like this:

    <h1>Book Covers</h1>
    <div class="grid-container grid-parent">
    <div class="grid-33">Text description of gallery here.</div>
    <div class="grid-66">[envira-gallery slug="book-covers"]</div>
    </div>

    So using the GP grid seems to create a container, and I can’t put my finger on what the selector is to reach that.
    Your suggested code selects the main content area, but the content area I’m trying to address doesn’t expand to fill that. Thanks for your continued interest though!

    #265136
    Leo
    Staff
    Customer Support

    Can you try removing <div class="grid-container grid-parent"> and </div> from your page content?

    Also add the CSS I provided above in the metabox.

    #265175
    Steven

    Hello, Leo. I appreciate your patience.
    I can address the region I think I want, but I can’t get its width to budge.
    I un-checked “full width content”
    I removed the containing “grid-container grid-content” div (that was a code example I picked up from somewhere on this forum).
    I tried your CSS. That wasn’t specific enough. To see what’s going on, I added background and a border with this CSS:

    
    .container.grid-container {
    background: #ccc;
        max-width: 1200px;
    }
    .inside-article .entry-content {
    border: 1px solid red;
    background: #999;
    max-width: 1200px;
    }
    

    Here’s a screen capture of the result:
    https://www.dropbox.com/s/x0gyxqszror6y1c/GP-targeting-regions.jpg?dl=1

    The background and border shows, but the width doesn’t budge. The dark gray with the border is the region I want to have expand, or at least so I think!

    Interestingly, I can get that region to shrink if I write

    
    .inside-article .entry-content {
    border: 1px solid red;
    background: #999;
    width: 600px;
    }
    

    But that’s of course not what I’m trying to do.
    Steve

    #265219
    Leo
    Staff
    Customer Support

    Wait a second…what is your Content Padding set at in Customizer > Layout > Container?

    The inside box you are trying to expand should expand with the outside box minus the padding you set in the setting above.

    So if you set the all the padding to 0 the two boxes should be the same size.

    Let me know.

    #265400
    Steven

    Good thought. Thank you.
    1 container, 1200px, setting of 40 for padding all around.
    https://www.dropbox.com/s/zsa0dl5sbcynikd/GP-container-settings.jpg?dl=1
    However, nothing seems to change when I tinker with those settings and besides – I don’t want to make a global change and affect the majority of pages which don’t have this specific gallery + text configuration.

    #265410
    Leo
    Staff
    Customer Support

    Really running out of ideas without seeing the site with Inspect element…

    Will ask Tom for help and he will probably get it first try ๐Ÿ™‚

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.