[Resolved] Grid columns with max-width

Log In Free Support

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

This topic has 3 replies, 2 voices, and was last updated 5 years, 3 months ago by David.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
March 12, 2021 at 2:31 am #1692165

Simon

Good Morning,

When creating a grid with 2 columns 75% & 25%, i would like the second column to have a minimum with (px), once it reach the min width it will break.

I cannot add an additional css to #4, i’m able to to add one to #5

1. div class=”gb-inside-container”
2. div class=”gb-grid-wrapper gb-grid-wrapper-95529088″
3. div class=”gb-grid-column gb-grid-column-951a4a2a”/div
4. div class=”gb-grid-column gb-grid-column-c21b27cf”
5. div class=”gb-container gb-container-c21b27cf gb-container-floating”/div
6. /div
7. /div
8. /div

Thank you

Simon

March 12, 2021 at 5:38 am #1692350
David
Staff
Customer Support
Hi there,

you can use the CSS nth-child selector.
Select the parent grid container and give it a Custom CSS class:
```
.custom-class > .gb-grid-column:nth-child(2) {
    /* style the 2nd item in grid */
}
```
We’ll be introducing flex-basis properties to the grid in the future so you can do this within the editor.
March 12, 2021 at 5:53 am #1692367

Simon

It works great, thanks!

March 12, 2021 at 7:31 am #1692674

David
Staff
Customer Support

Glad to hear that!
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.