0

I am using the adaptive theme with panels, mini panels, panels everywhere, and AT Panels Everywhere. My site default template is of at panels everywhere.

I built a 5 column mini panel for the footer. I assigned for each column only one thing: menu, or a logo, or "powered by drupal".

When I am using the builder layout for the mini panel, and build 5 column - every thing works fine, and I have 5 column one beside another, in only one row. (although, I am trying to avoid the builder and use only AT layouts).

But, If I am using the "AT responsive panel - 4,5,6 column" for the mini panel layout, the result is that my footer has two rows: top row is with 2 panels and bottom row is with 3 panels. it looks like the blocks or something are too big, and the AT layout is just being responsive.

I tried to solve that and make it one row, and add to each panel a class, and made them very narrow. but that didn't work, and I still have 2 rows, even though the panels are very narrow and can feat perfectly in one row (5 columns).

How can I make sure that every panel will use 20% of it's layout (when possible), and all will be presented in one row, 5 columns side by side?

Here is the problem: enter image description here

Here is the footer code:

The footer is still in two rows, and looks like that: enter image description here

What causing the AT mini panel to think it has no room, and need to change the layout?

0

This can be done CSS only:

Apply a width and float to all panels in the footer:

#footer .region {
  float:left;
  width:20%;
}

Or make them a little smaller so you can apply margins to 'm.

  • Thank you for your help. Unfortunately, my footer is still in two rows instead of one, and looks like the above (see question update). can you help me solve the issue? – EB84 Dec 2 '13 at 19:56
  • There is possible CSS applied to panel-row or row-1/row-2, which you need to change or overwrite. Float these. .panel-row, row-1, row-2 { float:left;width:20%; }. You have to add a float to the highest possible container of each element you want in one line. – Marcel Dec 3 '13 at 8:47
  • I thank you for your help, But I still could not solve it. I add the CSS, and with firebug made sure that the { float:left;width:20%; } is applied for "row-1" "row-1" and to "#panel-footer". of course, I double checked and made more tests (add float: left; to more class..) unfortunately, something is wrong here. Maybe you have more Ideas? – EB84 Dec 3 '13 at 18:29
  • Somewhere in your CSS something is applying a clear:both; on your panel or an element between your 2nd and 3rd panels, that interrupts the floating. You need to find this one or you won't be able to get a oneliner. – Marcel Dec 14 '13 at 9:01
0

I finally found the solution. AT is printing the following css code :

.five-5x20 > .panel-row {
    clear: none;
}

so, I adjust all the code to be:

#panel-footer .five-5x20 > .panel-row {
    float: left ;
    display: block;
    width: auto;
    clear: none;
}

the clear: none fix the proble, and now the float: left is working.

@Marcel Thanks for all the help

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.