Happy Halloween! Get 20% off GP Premium with the discount code: HALLOWEEN20

[Resolved] Shrink the inner container of a section?

Home Forums Support Shrink the inner container of a section?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #307368
    sdanbu

    Is there a way to control the size of the inner container of a section?
    I would like to shrink the inner container to a percentage of the page.

    Thanks

    This is a follow up to the section question
    https://generatepress.com/forums/topic/is-there-a-way-to-set-inner-box-background-color-for-a-section/#post-307344

    GeneratePress 1.3.46
    #307406
    Tom
    Lead Developer
    Lead Developer

    If you give the section a class, you could do this:

    .my-section-class > div {
        max-width: 70%;
        margin: 0 auto;
    }
    #307538
    sdanbu

    For some reason this didn’t work. I put “my-section-class” in the custom class field in the section that I was targeting but it still didn’t work.
    Did I do something wrong? Thanks for your help.

    #307543
    Leo
    Staff
    Customer Support

    Can you provide a link to your site so we can have a look? Thanks!

    #310128
    sdanbu

    The link for this issue is the same as the link for the other private email. Thanks!
    Basically I want to adjust the size of section containers but this CSS code above didn’t work for that for some reason.

    #310136
    Tom
    Lead Developer
    Lead Developer

    Can you try re-copying and pasting the code above? It looks like something went wrong and some characters were converted the last time you pasted.

    Let me know 🙂

    #310150
    sdanbu

    I tried it and it works — but I have a question

    If I want the width to be smaller, do I change the 70% to xx% that is smaller?

    Or do I change margin attribute to something besides 0 auto

    .my-section-class > div {
    max-width: 70%; <—-
    margin: 0 auto; <—-
    }

    #310151
    Leo
    Staff
    Customer Support

    Modify the percentage should work.

    #310159
    sdanbu

    Wait actually it doesn’t work

    Am I supposed to find the section and under settings > Custom Classes > put the title .my-section-class?

    .my-section-class > div {
    max-width: 70%;
    margin: 0 auto;
    }

    #310181
    Leo
    Staff
    Customer Support

    Add the class in without the dot: my-section-class

    #310198
    sdanbu

    I think max width works on desktop but not on mobile because it becomes full screen which is fine.

    Is there a minimum width or a fixed width setting as well?

    Or maybe I need to use margin?

    #310212
    Leo
    Staff
    Customer Support

    There is min-width and width for fix width. Wouldn’t recommend using though as I don’t think they would be responsive.

    You can target mobile with CSS like this though:

    @media (max-width: 768px) {
        .my-section-class > div {
            max-width: 70%;
            margin: 0 auto;
        }
    }
    #310220
    sdanbu

    Hm… not sure it’s working. I found this code – This kinda works but I don’t know how to make one part of the section “.outer” and one part of the section “.inner”.

    https://www.sitepoint.com/css-center-position-absolute-div/

    .outer {
    position: relative;
    width: 40%;
    height: 120px;
    margin: 20px auto;
    border: 2px solid #c00;
    }

    .outer {
    position: relative;
    width: 40%;
    height: 120px;
    margin: 20px auto;
    border: 2px solid #c00;
    }

    .inner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 10px;
    left: 50%;
    margin-left: -50px;
    background-color: #00c;
    }

    #310253
    Leo
    Staff
    Customer Support

    Sorry I’m little confused what you are trying to achieve here?

    The code should work for mobile…Can you try clearing browser cache maybe?

    #310483
    sdanbu

    It turns out that it worked when I called the section directly for example

    #generate-section-4 .generate-sections-inside-container {
    background-color:rgba(63,96,119,0.5);
    max-width: 30%;
    margin: 0 auto;
    }

    Thanks!

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