[Resolved] How to change the mobile breakpoint?

[LFD]

I think I need to know how to change the mobile breakpoint.

I want the website to look the same on a PC and an iPad and I’d like to constrain the width of the website so that it sits docked in one half of a PC screen. The current setting I’m using 768.

However, GeneratePress treats the iPad as a phone: The menu folds up and the two footers change to a single column display even though there is plenty of room available. This doesn’t happen on a PC (I’d actually prefer 3 footers, but I can’t even keep two in a row yet).

I am using the Content Views plugin to display posts in three columns on a static page and this works fine.

From the knowledgebase:

1.
You mention making the breakpoint available on the user interface in 2015 but I don’t see it anywhere.

2.
I’ve tried manually changing values in mobile.css as described without success.

Can you tell me how to prevent the menu and footers from folding up on an iPad?

Thank you

Glenn

[Tom]

Hi there,

Give this CSS a shot:

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

    .main-navigation .menu-toggle,
    .main-navigation .mobile-bar-items,
    .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: none;
    }

    .main-navigation ul,
    .gen-sidebar-nav {
        display: block;
    }
}

You can reduce the 768 even more if you want to delay the mobile styles.

[LFD]

I have two questions…
but while I have your attention I have a few more things too.

(1)

Thank you for your help, the CSS worked the first time.

I put the CSS into

>> Dashboard > Appearance > Customise > Additional CSS

Is this the best place to leave it permanently?

(2)

I’d like to delay the switch to mobile to a lower value perhaps 700px as you suggest after I’ve done some phone res research. Please confirm that I simply switch the numeral on the first line:

@media (min-width: 700px) {

—- other stuff ——————

(3)

Feedback on forum display.

I use the GeneratePress forum a lot but I keep clicking on the grey bar between the main page and the ‘common issues’ sidebar as if its the page slider on the far right.

I do it almost every time, it’s a tough habit to break, especially when I’m concentrating on the text. Its caused by the grey background image sliding down between the two sections and mimicking a slider bar.

It would help a lot if the gap stayed a solid colour on all page widths. I like the design, but it also drives me crazy.

(4)

How I solved a ‘new user’ issue.

I took a few days to get the hang of what I needed to do in GeneratePress and I twiddled with just about everything to get it to do what I wanted. It might seem intuitive but I did get discouraged half-way through. There are overlapping functions in different places and they affect each other.

Eventually, I got somewhere and I later discovered that the block editor had stopped showing its buttons. I had to wave the mouse around the general area to glimpse them. I found that this was due to GP settings.

I solved that by manually writing out every setting in all of the GeneratePress sections on a piece of paper, then I cleared all the settings with the reset function and recreated the settings from the notes in single steps.

That worked. It could be a way out for other users too.

(5)

More feedback

I’m a new user and I’m looking at your interface for the first time. It took me a while to confirm that the GeneratePress settings are all contained in the Dashboard ‘appearance’ section. (As a programmer, I don’t take things for granted).

I would have found it more intuitive if the two Generate Press areas were brought together in the list:

Instead of:

Generate Press
Elements

To something like this:

GenPress Modules
GenPress Elements

Something else to consider.

(6)

I haven’t found any other theme that lets me go this narrow and it’s one of the main reason I wanted to use GeneratePress. The layout and colour customisations clinch it.

[Tom]

Hi there,

1. If you don’t have a child theme, that’s the best place for it. If you have a child theme, the child style.css is the best place for it.

2. Exactly.

3. I’m not sure I fully understand? Which area are you clicking on?

4.

I later discovered that the block editor had stopped showing its buttons. I had to wave the mouse around the general area to glimpse them. I found that this was due to GP settings.

Which buttons stopped displaying? Which settings were preventing it? GP shouldn’t remove anything from the block editor.

Really appreciate all the feedback! It’s really helpful 🙂

[LFD]

I have sent an email with JSON files and screenshots to the ‘answer notification’ address you used. Please confirm you received it ok.

[Author]

Posts