0

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)

0

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

  two_column_66_34:
  label: Two Column 66/34
  category: La Liga News
  path: layouts/twocol_66_34
  template: twocol_66_34
  css: twocol_66_34.css
  regions:
    top:
      label: Top
    left:
      label: Left side
    right:
      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>

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

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

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, privacy policy and cookie policy

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