Archived topic

Set min width for mobile layout

4 replies · Started by lunatrix on April 6, 2019

Viewing posts 1–5 of 5

April 6, 2019 at 3:19 pm #861627

I would like my site to show the mobile layout (ie - sidebar pushed to bottom, and hamburger menu) for anything lower than 1024px width.

My site is laid out with the logo to the left of the main navigation (float right), and a left sidebar.

Thanks.

April 6, 2019 at 4:12 pm #861643

Hi there,

For the mobile menu, the easiest way is to install GPP 1.8: https://generatepress.com/gp-premium-1-8/

Then you can turn on the Mobile Header and set the breakpoint in the Customizer.

For the sidebar, try this CSS:

@media (max-width: 1024px) {
    .sidebar,
    .content-area,
    .inside-footer-widgets > div {
        float: none;
        width: 100%;
        left: 0;
        right: 0;
    }
}

April 6, 2019 at 4:55 pm #861660

The CSS is perfect! Thanks :)

I wasn't sure how to get the beta upgrade to work (I just ticked the box, but couldn't find a way to kick off the upgrade), but that's ok because the full menu is fine on the larger screen. I was more concerned with getting that sidebar down.

This is THE BEST theme ev-ar! :D

April 7, 2019 at 6:27 am #861917

Hi Tom,

in Version 1.8.0-beta.1 there is a screen tip on the breakpoint text field regarding valid values. For example I enter 767 it allows me to publish but on hover over the entry field the screen tip says "please enter a valid value. The nearest valid values are 765 and 770". I don't think we need to use increments of 5 do we?

just checking, thanks

April 7, 2019 at 8:57 am #862120

Glad it worked! The beta update should appear in the Plugins area of your Dashboard like any other regular update.

Douglas - it shouldn't care what value you enter. Any chance you can open a new topic for this and include a screenshot?

Thanks!

This archived topic is closed to new replies.

Start building better websites today.