Heya team!
I did bust out a search because I figured others would have implemented this. Here’s a screenshot for a use case, but I’ve ran into this kind of layout often:
I’m asking how to reign in content width with a global container. I’d like 1 column to adhere to the global container size, but the other column to “violate” that container so content (usually an image or post grid) goes all the way to the edge. USUALLY this is in a thirds-style layout–when it’s been 50/50 I’d use a nested div with a max-width combined with flexbox alignment on the parent, but for the 33/33/33 approach I’m stumped!
(marked with global container)
How would you do it if you wanted 2 of 3 columns to mimic the regular global container’s parameters with that third going full-width?
I’ve tried the following approach (but with Cornerstone settings, not CSS):
Col1 {
justify-content:right;
}
Col1-Container {
max-width: 793px; /* Two-thirds of 1200px, the default global container size */
padding-right:25px;
}
However, this doesn’t take into account the varying responsive sizes of Col2, can you see my issue lol.
(another example of columns “violating” the global container while some interior content adheres to it)
