[Resolved] separate container spacing for pages vs. posts + responsive GP sidebar width %

Home Forums Support [Resolved] separate container spacing for pages vs. posts + responsive GP sidebar width %

Home Forums Support separate container spacing for pages vs. posts + responsive GP sidebar width %

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2351412
    Michael

    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.png

    2. 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!!!

    #2351856
    Ying
    Staff
    Customer Support

    Hi 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.

    #2352042
    Michael

    Hi 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%

    }

    #2352657
    Ying
    Staff
    Customer Support

    Hi Michael,

    I don’t see any content in the private info field, can you check?

    #2352850
    Michael

    Hi 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

    #2353579
    Fernando
    Customer Support

    Hi 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.

    #2353975
    Michael

    Hi 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}
    }

    #2354416
    Ying
    Staff
    Customer Support

    Hi 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.

    #2354974
    Michael

    Hi 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

    #2355808
    Fernando
    Customer Support

    Can 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.

    #2356219
    Michael

    Hi 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}

    }

    #2356834
    Ying
    Staff
    Customer Support

    I 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:
    https://www.screencast.com/t/yh4ILdopS

    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

    #2356946
    Michael

    Hi 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

    #2356961
    Ying
    Staff
    Customer Support

    You are welcome πŸ™‚

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