Home › Forums › Support › separate container spacing for pages vs. posts + responsive GP sidebar width %
- This topic has 13 replies, 3 voices, and was last updated 1 year, 6 months ago by Ying.
-
AuthorPosts
-
September 23, 2022 at 1:57 am #2351412Michael
Hi guys
A few questions? I tried my best to find a similar question in the forum, but nothing quite hit the mark
1. I’d like to have separate containers with a gap on my archive pages, with the page background color visible. However, I don’t want this gap visible between GB containers on other pages. I imagine there’s a quick CSS fix for this?
https://pasteboard.co/pXBqgtKk8W2Y.png
https://pasteboard.co/d4OOxrGqquhE.png2. somewhat related- I’d like 2 archive columns + sidebar on desktop and 1 column + sidebar on tablet. I found the CSS for this, but I want the GP sidebar (GB block element) to be a bit wider on tablet, but it’s showing at 33% of the tablet width, which cramps the form in the sidebar. If i could get like a 60% archive card and 40% sidebar for tablets, that would be swell. Not sure how to change the sidebar %, for different screen widths as that’s fixed in the GP customizer settings.
Thanks!!!
September 23, 2022 at 10:22 am #2351856YingStaffCustomer SupportHi Michael,
Can you link me to your site so I can see how your pages are built?
You can use the private info field for this.
September 23, 2022 at 3:29 pm #2352042MichaelHi Ying!
I’ve shared the links to the two pages in the private field below.
*Also, I tried some CSS to get the blog content and sidebar width adjusted for different displays, but unfortunately it also changes the content width on other pages. Is there a specific class or selector I should use, just to limit it to the blog archives? Here’s what I have below
/*blog archive columns*/
@media(min-width: 769px) {
.archive .site-main,
.blog .site-main {
display: flex;
flex-wrap: wrap;}
.archive .site-main article,
.blog .site-main article {
flex: 1 0 calc(100% – 15px);}
}
@media(min-width: 1024px) {
.archive .site-main article,
.blog .site-main article {
flex: 1 0 calc(50% – 15px);}
}
@media(min-width: 1280px) {
.archive .site-main article,
.blog .site-main article {
flex: 1 0 calc(33% – 15px);}
}
.gb-container-5413b1bb {height:100%}
September 24, 2022 at 11:22 am #2352657YingStaffCustomer SupportHi Michael,
I don’t see any content in the private info field, can you check?
September 24, 2022 at 5:57 pm #2352850MichaelHi Ying,
Please disregard the question about the color in the space between containers. I’ve decided on another option.
The issue with the sidebar/content width remains, however. The CSS above gets me what I want on the blog archive page, but changes the content width on all other static pages. If you could help with this, or perhaps propose a simpler solution, that would be awesome!
Site link in private info
Thanks,
Michael
September 25, 2022 at 6:52 pm #2353579Fernando Customer SupportHi Michael,
The code you provided above shouldn’t be affecting static pages. Can you try clearing cache to assure we’re seeing the same thing? If you could also share a screenshot of the issue, that would be great.
September 26, 2022 at 5:19 am #2353975MichaelHi Fernando,
I removed the CSS temporarily yesterday, so you may have seen the normal layout. I’ve added it back- please check now.
for reference, here’s a screenshot of the 75/25 content/sidebar result on a current, static, normal page.
https://pasteboard.co/gqk7KZMeIM2k.png
you wanna hear something crazy? 2 days ago when this CSS was active, the ADMIN PANEL was showing at 75% content width…. i.e. all the columns in the admin panel pages/posts list had a 25% white space on the right. pretty wild.
/*content and sidebar width*/
@media(min-width: 768px) {
#content .content-area, {
width: 55%;
}
#right-sidebar {
width: 45%;
!important}
}
@media(min-width: 1080px) {
#content .content-area {
width: 75%;
}
#right-sidebar {
width: 25%;
!important}
}September 26, 2022 at 11:41 am #2354416YingStaffCustomer SupportHi there,
This is the CSS that is affecting the pages sidebar layout:
/*content and sidebar width*/ @media(min-width: 768px) { #content .content-area, { width: 55%; } #right-sidebar { width: 45%; !important} } @media(min-width: 1080px) { #content .content-area { width: 75%; } #right-sidebar { width: 25%; !important} }
https://www.screencast.com/t/7AR2AsdXp
The numbers match the ones you set for the archive/blog.
September 27, 2022 at 2:33 am #2354974MichaelHi Ying
I think we may have our signals crossed. I know that the CSS that you shared is what’s causing the problem. I just need a quick tip about how to apply that to only one page or specific post type/id. What can I add to it so it doesn’t globally affect other static pages or the even the admin panel?
I know this isn’t CSS school… but if you have a minute, I’d really appreciate it.
Thanks!Michael
September 27, 2022 at 5:18 pm #2355808Fernando Customer SupportCan you try checking if there’s a syntax error anywhere in your Custom CSS codes?: http://csslint.net/
The CSS provided by Ying only targets the Blog and Archive pages. One possible cause is if you have an Optimization/caching plugin that messes up the CSS. Try disabling them temporarily as well to check.
September 28, 2022 at 3:54 am #2356219MichaelHi Fernando
I spent a few hours playing with it and found a selector that limits it to the blog archive. Adding .grid-container limits it to the archive pages, so the main pages look normal now. Any issues you can see with this? Otherwise I think we’re good to go- thanks.
@media(min-width: 768px) {
#content .content-area .grid-container {
width: 65%;
}
#right-sidebar {
width: 35%
!important}}
@media(min-width: 1024px) {
#content .content-area .grid-container {
width: 75%;
}
#right-sidebar {
width: 25%
!important}}
September 28, 2022 at 1:46 pm #2356834YingStaffCustomer SupportI think Fernando misunderstood your question π
If you want to target a single post or page, you can find its id in the editor URL field, in this case, it’s
428
:
And it’s a page that I was editing, so you can add
.page-id-428
to your CSS selector, like this:
.page-id-428 #content .content-area
.If it’s a post, it will be
.postid-428
, so the selector would be.postid-428 #content .content-area
September 28, 2022 at 4:01 pm #2356946MichaelHi Ying,
It’s all good- seems we all had a little misunderstanding- π I guess I could have described the situation more clearly.
I’ll use the page/post id selector you mentioned- that will be perfect. It will also allow me to control the .primary .content-area background color on the archive page as I wanted to do earlier.
Thank you!
Michael
September 28, 2022 at 4:12 pm #2356961YingStaffCustomer SupportYou are welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.