[Resolved] Shrink the inner container of a section?

[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

[Tom]

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

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

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

[Leo]

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

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

[Tom]

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 🙂

[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; <—-
}

[Leo]

Modify the percentage should work.

[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;
}

[Leo]

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

[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?

[Leo]

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

[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;
}

[Leo]

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?

[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!

[Author]

Posts