0

How to use min-width or max-height for panel elements in a responsive theme (in my case Zircon for Drupal 7 is used https://www.drupal.org/project/zircon)? When min-width is used, elements overlap when resized for mobile phones. max-height tends not to be usable. Could you indicate where to change css to make it work for both cases or the one with min-width?

For example, in page.css for adaptive panel elements some classes are used (pane1 and pane2). In total there are 3 panes. The third pane works fine and moves down but pane1 and pane 2 start to overlap each other.

in page.css (Zircon theme):

pane1{ min-width: 300px; }

pane2{ min-width: 300px; }

pane3{ min-width: 300px; }

1

2 Answers 2

0

Use media queries. For example:

CSS:

@media all and (max-width: 500px) {
    pane1{
        min-width: 200px;
    }
}

This code will apply only when browser width is smaller (or equal) than 500px.

I don't know if I clearly understood you, but I hope this will work.

1
  • They continue to overlap, in this case all three, with my example only first two elements overlapped each other. Maybe it is due to Drupal Zircon specific theme, as in *.info file some resolutions are defined there but I don't know where and what to change in order to make it work, as there are a lot of things there. Zircon theme is fully responsive. Jun 30, 2016 at 3:35
0

Media queries would be your answer:

@media screen and (min-width: 767px){
  .pane1, .pane2, .pane3{
    min-width:300px;
  }
}

@media screen and (max-width:766px){
  .pane1, .pane2, .pane3{
    min-width:150px;
  }
}
4
  • They continue to overlap, in this case all three, with my example only first two elements overlapped each other. Maybe it is due to Drupal Zircon specific theme, as in *.info file some resolutions are defined there but I don't know where and what to change in order to make it work, as there are a lot of things there. Zircon theme is fully responsive. Jun 30, 2016 at 3:30
  • So on the min-width media query, the width on the panes is only set on a screen that is greater than or equal to the 767px. If you need it to break sooner/on a larger screen increase the min width in the query. On the max width query, the 766px width will only be set on those panes up to 766px, if you need that smaller width on a larger screen, just increase the max-width query to a higher number (but make sure you keep that min width query at least 1 pixel more than the max width)
    – ConorJohn
    Jun 30, 2016 at 9:36
  • Other than that I'd have to see it myself, apologies if it just confused
    – ConorJohn
    Jun 30, 2016 at 9:36
  • It doesn't work properly either. There is a link to this theme drupal.org/project/zircon Jul 2, 2016 at 2:38

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.