[Resolved] Responsive setting

[Geert Pierloot]

1) Is there a convienent way to change the number of widgets next to each other depending on the screen width? Currently my website is set to 1100px with 4 footer widgets (=275/widget). At 1010px it jumps already to 2×2 (=505px/widget) andt at 750px already to 1×4 (= 750 px wide or 2.7x original size!).

2) The same with the menu’s? My secondary menu is rather small, and only on the smallest (lest say 300px) devices it should collapse.

3) How can make menu’s in the sidebar (using widgets – no native GP menu’s) behave in the same way as the GP-menu’s do?

[Tom]

1. You can set some CSS to override the current settings, for example:

@media (min-width: 769px) {
      .inside-footer-widgets > div {
            width: 25%;
            float: left;
      }
}

@media (max-width: 768px) {
      .inside-footer-widgets > div {
            width: 50%;
            float: left;
      }
}

2. Less than 300px wouldn’t every come into play these days, but you can remove the collapsible menu like this: http://generatepress.com/forums/topic/secondary-navigation-on-mobile-question/#post-120014

3. Like look the same as the main/secondary navigation do in the sidebar? This would only be possible with quite a bit of custom CSS – I may be able to write some up in the next couple days.

[Geert Pierloot]

Thanks for the reply. Point one and two are working fine! I had been trying the trick of point one before without success but now it is working (probably a typo).

Point 3: A lot of code was also what I had in mind. Just wanted to check of there was no easy way.

Thanks! Great support!

[Tom]

Awesome, glad it worked!

I’m keeping the other thing on my list – I’ll write some code up for it ASAP 🙂

[Author]

Posts