Breakpoint editing in spirit / Upfront themes responsive mode

Why is it not possible to edit all the breakpoint sizes for all modes in spirit? I can edit the large tablet sizes but not mobile or portrait ipad size for example.

  • Sajid
    • DEV MAN’s Sidekick

    Hi @Jason

    Hope you are doing good today :slight_smile:

    We have added most common breakpoints for responsive layouts. Add all possible responsive breakpoints are not simply possibly, at least at the moment.

    However, If you want to target a specific device/orientation then you have to use media query to make it work. You can add custom CSS from upfront > Theme Settings > Add custom CSS rules.

    Hope that helps :slight_smile:

    Cheers, Sajid

  • Jason
    • Design Lord, Child of Thor

    A little help on how I increase the breakpoint from 570px to 641 px which is visible areas whilst editing would be great, managed to alter the original landscape breakpoint via the GUI, but cannot on others.

  • Sajid
    • DEV MAN’s Sidekick

    Hi @Jason

    Hope you are doing good today :slight_smile:

    I am really very sorry I totally misunderstood your question. I thought you want all responsive breakpoints (different dimensions, like iphone, android etc.. ) in upfront theme so you can edit layout of each device. Sorry!

    They should all work and should be editable so you can make changes according to dimensions.

    If they don't please grant support staff access from WPMUDEV > Support > Support Access > Grant Access, so I can take a closer look and troubleshoot. While troubleshooting I will be deactivating plugins, themes to make sure its a conflict. I will restore it back after testing.

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

  • Mike
    • The Bug Hunter

    Hi Jason,

    I don't think that functionality is implemented yet but if you are confident enough then you can do it by altering the theme files.

    The themes breakpoint settings are in "settings.php" file. In that file you will find an associative array.

    Look for this entry:

    'responsive_settings' => '[{ json array here }]',

    It contains a Json array containing an object called "breakpoints". Simply edit them here or add a new one in. Downside with this though is that it will probably get overwritten by an update. There is probably a way to make it save it to database but I have taken route of creating my own child theme so I am not sure.

    Make sure to take a backup if you try it.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.