Builder: Issue with the Global CSS in responsive mode

We have granted access to our staging site and left a note about an issue with saving @media query css code and anything that has to do with to responsive/viewports. We commented an earlier support ticket thinking that there is some connection. But due to the urgency of our problem, we thought of posting a new one.

Steps to recreate issue:

1. Click responsive button
2. Whilst in Desktop, Click Global CSS
3. Enter code (Do not include @media css code)
4. Click Save
5 Click Tablet Icon off the top
6. Enter CSS code (Do not include @media css code)
7. Click Save.
8. Click Exit
9. Sometimes the frontend will reflect the changes. So use another browser.
10. Go back in by clicking the responsive button, then the global css. The code is still there.
11. Click Exit
12. Click Save
13. Check if Frontend effects the change again
14. Exit Builder and come back in the code is gone.

We also combined steps to clear cache and/or reset the theme but to no avail. We believe that this is NOT a permission issue. We have placed our viewport CSS in settings.php directly but the problem is that changes are reflected on the frontend. You see a disoriented layout in builder by doing this.

You will note that we had to code directly in settings.php because that too is a problem when you insert your @media stuff. Builder only saves css code that are not scoped with @media. It wipes out css code inside @media { }. Checking theme samples, we can see that settings.php contain @media code. So it is hard to understand why this should be a permissions issue.

As we have spent tremendous time to learn and deal with a lot of issues we encountered with builder, can you please tell us where the code for responsive Global responsive CSS is saved? Can you please us provide us a sample of how we will be able to code it directly especially if it needs to be coded as an array. Kindly supply the above first before we deal with the real issue.

This is a stop gap measure for us to be able to finish our project. If coding directly will not provide the desired result, we will get back to you to investigate. You have access anyway to the staging site and have until 7am UTC +11 to dial-in. But please, kindly send the sample code and instructions as to where the code should be inserted and/or saved.

Thank you and looking forward to your response.

  • Vaughan
    • Support/SLS MockingJay

    Hi Jonathan,

    Hope you're well?

    Builder is for designing a child theme which you then export.

    Once you have installed and activated it on a site, ie, the theme is the active theme, you should not be using builder to customise, you should actually be using the normal Upfront editor to edit the active theme instead of builder.

    Think of Builder as a child theme creator, not a theme editor as such.

    The issue you're describing sounds like the issue in the following thread.

    If that's the case, then the developers are looking into this. The issue with @media is also on the Todo list too.

    I can certainly replicate this behaviour though & it seems related to the above mentioned thread where changes are not being saved.

    Hope this helps

  • Jonathan
    • WPMU DEV Initiate

    Hi Vaughan,

    We are building a child theme which we will then deployed to more than one website. For each website we will just change the default copy and colours. That is what we are trying to achieve. When you probably dialled-in to the staging site, it gave you the impression that we're editing a one because we are not using Lorem Ipsums. I'm aware that we have to change some links. So not sure and I got confused with your comment.

    In reference to Dave's support ticket, following the steps he did not mention whether he is missing the CSS code or if the settings for each element in responsive edit mode get saved. We don't have issues with the latter (yet!) but from the tests we done they seem to stick for as long as we click save before we click onto the next view port. The CSS entered for each viewport are the ones that disappear following Dave's steps.

    I can see that the last response for that ticket was 13 Dec. You haven't mentioned a timeline for the the fix. But are you able to tell us where the custom CSS code in responsive mode is saved (folder and filename pattern), and are you able to send a sample we can work on?

    We are able to wait for the fix re @media issue because we are able to edit settings.php. The responsive mode CSS is what is very important to us.

    Thanks and looking forward to your response.

  • Sajid
    • DEV MAN’s Sidekick

    Hello Jonathan,
    Hope you are doing good today :slight_smile:

    I can confirm that you can not save the media queries in global CSS settings. That is by design, since we handle break points differently via our responsive settings of builder.

    You can find these styles in settings.php file under responsive_settings index. I would recommend you not edit this file directly. If it is really needed then be really very careful about the syntax, if you mis a single coma, it will break the whole theme.

    If you edit this in Upfront Editor instead of Upfront Builder, then you may not see these changes in settings.php file. Because, these gets saved directly in options table of database under upfront_(themename)_responsive_settings option key.

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid - WPMU DEV Support

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.