0

I am using panel-2col-brick to make a 2 x 2 information block. The HTML structure of the page is as follows

<div class="panel-display panel-2col-bricks clearfix">
  <div class="panel-panel panel-col-top">
  <div class="center-wrapper">
      <div class="panel-panel panel-col-first"></div>
      <div class="panel-panel panel-col-last"></div>
  </div>
  </div>
  <div class="panel-panel panel-col-middle">
  <div class="center-wrapper">
      <div class="panel-panel panel-col-first"></div>
      <div class="panel-panel panel-col-last"></div>
  </div>
  </div>
</div>

Now i need to change height of the second occurrence of panel-col-first and panel col-second. I have tried

.panel-2col-bricks .center-wrapper .panel-col-first:first-of-type,
.panel-2col-bricks .center-wrapper .panel-col-last:first-of-type{
       height:80px;
       overflow:hidden;
}

However this changes the height of both top-first and bottom-first columns. Is there any way i can adjust height of both rows separately ?

closed as off-topic by mradcliffe, Mario Steinitz, Clive Mar 1 at 7:01

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – mradcliffe, Mario Steinitz, Clive
If this question can be reworded to fit the rules in the help center, please edit the question.

1

to achieve this you need make use of CSS pseudo selectors and apply them in the correct element, a good approach can be this:

.panel-2col-bricks > .panel-panel:nth-child(2) .center-wrapper .panel-col-first,
.panel-2col-bricks > .panel-panel:nth-child(2) .center-wrapper .panel-col-last

You can see this in action in the link below: https://codepen.io/anon/pen/xBZGGb

  • If this answer is correct for your problem please mark this as accepted answer. Thanks – Jjsg08 Feb 28 at 22:50
  • Thanks Jjsg08. I tried it, but unfortunately it did not work. This CSS portion has stopped applying altogether with the mentioned changes. – Abdul Mar 1 at 5:54
  • Also panel-panel and center-wrapper are at the same level. They do not share parent child relationship. so i tried .panel-display .center-wrapper:nth-child(2) .panel-panel{ height:80px; overflow:hidden; } However this only changes the first row. Whereas it is supposed to apply to second row of columns – Abdul Mar 1 at 6:08
1

With the help of Jjsg08's idea of CSS pseudo selectors i was able to figure it out. The idea is to jump in multiples of 2. So .center-wrapper:nth-child(2) will apply to first row whereas .center-wrapper:nth-child(4) will apply to second. Strange as it may seem, as i have only two center-wrapper elements in the code, it works.

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