I'm trying to set a panel width, I'm using the "two columns stacked" layout, but I want that one column is 2/3 width and the other 1/3. Is 50% by default.

By default looks like this: enter image description here

If I put this in my theme css:

.panel-2col-stacked > .panel-panel > .block-region-left {
    width: 66%;
.panel-2col-stacked > .panel-panel > .block-region-right {
    width: 34%;

I looks like enter image description here

What I have to achieve that the panels take all the space available as in the first screenshot ?

I'm using a bootstrap subtheme with fluid container enabled (I don't know if this is important)

1 Answer 1


Sorry, the CSS code is wrong. I have made it work with.

.panel-2col-stacked > .panel-panel:nth-child(2) {
     flex: 0 1 65%;
.panel-2col-stacked > .panel-panel:nth-child(3) {
     flex: 0 1 34%;

But, I finally I dicided to create my own layout.

I created my mytheme.layouts.yml

  label: Two Column 66/34
  category: La Liga News
  path: layouts/twocol_66_34
  template: twocol_66_34
  css: twocol_66_34.css
      label: Top
      label: Left side
      label: Right side

then I created in the layouts/twocol_66_34 directory

the twig template, named twocol_66_34.html.twig

  <div class="panel-2col_66_34" {% if css_id %}{{ css_id }}{% endif %}>
  <div class="panel-panel panel-full-width">
    {{ content.top }}

  <div class="panel-panel panel-col-left">
    {{ content.left }}

  <div class="panel-panel panel-col-right">
    {{ content.right }}

and its CSS (also in layouts/twocol_66_34) named twocol_66_34.css

.panel-2col_66_34 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

.panel-2col_66_34 > .panel-col-left {
  flex: 0 1 65%;

.panel-2col_66_34 > .panel-col-right {
  flex: 0 1 34%;

.panel-2col_66_34 > .panel-full-width {
  flex: 0 1 100%;

More info at How to register layouts with Layout Plugin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.