Problems with mobile version of site using Upfront Editor and Issue

Hi WPMUDEV

I've been creating a site using Upfront Editor for the first time (and Issue Theme).

When testing my site for the mobile version, I am running into huge problems with elements here and there not looking too crash hot at all :slight_frown:

I think the display issues are stemming from a lot of the custom elements/code I’ve added into my design. I resorted to adding my own CSS because I had so much difficulty aligning a lot of the elements using the drag and drop feature in Upfront Editor. The layout looks right in desktop browser but as soon as the viewport is resized the layout breaks and my computer lights up into a blazing ball of fire....well that's what it feels like...

My first attempt at resolving this was going into ‘responsive’ mode in the Editor. However this does not produce any results at all when trying to target particular elements and then resize them or reposition them. The only thing I can effectively do with this option is to either hide or show regions, but this will not work as I have a whole header, with widgets inside that I need to display.

The second possible solution attempted was to add in the @media queries myself into the editor (where my custom CSS resides) and then reposition and re-size my elements there myself. The only problem is, what I have discovered, is that Uprfont DELETES this code as soon as I add it in and then save it. So basically if I enter this code for example

@media (min-width: 460px) {
#my-selector {width: 100%}
}

Then save Upfront. If I then go back into where I just saved this code, it disappears into oblivion never to be seen again. So I am assuming that Upfront deletes it, for some reason…..

If I cannot target the elements myself, I just don’t know how I’m going to fix the site.
I’m really hoping I could get some help and guidance on how to fix this, as the mobile and tablet versions of my site look damnnnn ugly :slight_frown:

What can I do? Is there a way to stop the gremlins eating my code and allow me to put in my @media queries? (as I think that this is the most easiest option!)

P.s. as an example, I have a Header region, in which resides a logo (image), a widget (search box), a main navigation menu, as well as a smaller top navigation region that just has account login and shopping cart. All these elements I have custom positioned using CSS (margins, widths, heights, etc.) because I could not get precise alignment using the on page builder. When viewing the header in mobile viewport, all these elements do not resize, the header region takes up way to much space, the main menu does not go responsive at all…..the list goes on……pleeeassse help!!!

  • Sohag Ronjon Dey

    Hi Ana,

    Thanks for contacting us. :slight_smile:

    The media rule will not be saved in preset css as we auto prepend the styles there so it will cause issues. You can add custom css for different breakpoints without media rules.

    1. For this select responsive mode in left editor panel
    2. Then select the break point at the top
    3. Then click the "Edit Global CSS"
    4. Then in the css editor add your css without media rule. The media rule will be automatically added to this css while generating the page in the front.

    Please check the screenshot.


    If you like to add css for more breakpoints then exit the responsive mode and add your css in the global css with media rule. Please check the sceenshot.

    Hope this helps.

    If this does not help then please grant support access from the dashboard plugin so we can take a closer look. You can grant support access via

    WPMU DEV > Support > Grant Support Access.

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    It seems your site is in a local development environment. Please create a staging site on a live environment and grant us support access to it. For creating staging site hope this article may help

    https://premium.wpmudev.org/blog/set-up-staging-site-cheap-shared-hosting/

    Cheers,
    Sohag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.