[Resolved] setting left margin when using layout element with no sidebars

Home Forums Support setting left margin when using layout element with no sidebars

  • This topic has 7 replies, 3 voices, and was last updated 1 month ago by Leo.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1418844
    Leslie

    Hi GP team. I have a question about setting margins when using a layout element. For two custom post types, I am using a layout element with no sidebars. (My default layout is right sidebars). This results in the post content being centered on the page. Instead, I’d like to move everything to the left a bit because I think it’s more natural to read on text-heavy sites like mine. Admittedly this leaves some blank space on the right, but I think that’s ok. I haven’t been able to figure out how to customize the margins when using a layout element for a custom post type. Do I need to create a my-post-type-single.php template? Or should I revert to my default layout and then try to make the sidebars invisible on these custom post types (in which case, I’d still want to fiddle with the margins I think). On this support forum, I thought I read an answer suggesting that I could simply add some css to my child theme style.css file, in this format:

    .something .my-post-type {
    [insert css for margins here] ;
    }

    However, I am struggling with the CSS and wondering if such a solution is really possible. Your help is appreciated. Thanks. Leslie

    #1418909
    David
    Staff
    Customer Support

    Hi there,

    you can target the site container on Post/Pages where no Right Sidebar is present using this CSS:

    body:not(.right-sidebar) .site {
        /* No right sidebar styles go here */
    }
    #1419334
    Leslie

    Thanks David. I actually need to target two specific custom post types, not any page without a right sidebar. For example, my home page has no right sidebar and I don’t want to change its settings. Is there a way to target a CPT with CSS? Assuming yes, would I then set margin: auto? or text-align: left? Thanks again, Leslie

    #1419484
    Leo
    Staff
    Customer Support

    The CPT class should be in the <body> tag so it would be something like this:

    body.post-type-xxxx .site {
        /* No right sidebar styles go here */
    }

    If this doesn’t work then please guide us to the page in question.

    #1421056
    Leslie

    Thanks Tom. I couldn’t figure out how to make that work, but I was able to set the margins for the custom post type like this (cpt name is “ewir”):

    .type-ewir {
    margin-left: 100px;
    margin-right: 200px;
    }

    Now I need to adjust the placement of the search-form, or figure out how to target the whole page at once. Here is the page:

    http://lexata.kinsta.cloud/early_warning_insider_reporting/moratorium-relief/

    Your help is much appreciated. Leslie

    #1421065
    Leo
    Staff
    Customer Support

    Let’s take a step back.

    Are you basically trying to reduce the container width in single post of ewir?

    If so what if we remove the previous CSS and just use this instead?

    body.single-ewir .site.grid-container {
        max-width: 1500px;
    }
    #1421094
    Leslie

    Thanks, that’s very helpful. Yes I wanted to narrow the container width, but without centering it on the page. Without sidebars, I couldn’t figure out how to avoid centering. But with your css above, I was able to achieve what I wanted like this:

    body.single-inv_funds .site.grid-container {
    max-width: 850px;
    margin-left: 100px;
    }

    Thanks again. Leslie

    #1421115
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.