- This topic has 18 replies, 3 voices, and was last updated 7 years, 2 months ago by Leo.
-
AuthorPosts
-
January 16, 2017 at 10:36 am #264638Steven
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.
SteveJanuary 16, 2017 at 10:42 am #264640LeoStaffCustomer SupportHi Steven,
Are you able to provide a screenshot or an example of what you are trying to accomplish?
January 16, 2017 at 11:36 am #264667StevenThanks, 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=1For a page with background info and a gallery of images (using Envira Gallery):
https://www.dropbox.com/s/eevx2kg5ix4f95r/GP-cramped-columns.png?dl=1Please let me know if there is some better way to embed images on this forum.
January 16, 2017 at 11:41 am #264671StevenIn 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.
SteveJanuary 16, 2017 at 12:03 pm #264683LeoStaffCustomer SupportGive 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.
January 16, 2017 at 12:59 pm #264704StevenHello, 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.
SteveJanuary 16, 2017 at 1:04 pm #264707LeoStaffCustomer SupportCheck 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.
January 16, 2017 at 3:05 pm #264745StevenNo 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
January 16, 2017 at 3:20 pm #264747LeoStaffCustomer SupportDon’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.
January 17, 2017 at 12:39 pm #265116StevenThere 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!January 17, 2017 at 12:53 pm #265136LeoStaffCustomer SupportCan 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.
January 17, 2017 at 3:40 pm #265175StevenHello, 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=1The 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.
SteveJanuary 17, 2017 at 6:28 pm #265219LeoStaffCustomer SupportWait 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.
January 18, 2017 at 6:51 am #265400StevenGood 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.January 18, 2017 at 7:18 am #265410LeoStaffCustomer SupportReally running out of ideas without seeing the site with Inspect element…
Will ask Tom for help and he will probably get it first try ๐
-
AuthorPosts
- You must be logged in to reply to this topic.