Responsive option in Upfront displays irregularly

I went in to add some css to make my gallery images bigger in mobile viewer (way to small on an iphone portrait, see pic 0172). I had changed the opacity of the background region, behind the gallery, then didn't like it, so I went back and all of a sudden I can't hit the settings or the delete icons. The only thing I can edit is the bottom part of the region. See attached pic help2

As well, when I am working on my gallery page, I hit responsive and it goes all wonky in the viewer. I select the 315px one and the green outline should switch icons at the top, but doesn't. The green outline just stays on the default, however the interface changes and looks way off. See attached pic help; this is what the screen looks like after I hit the 315px option at the top.

Also, on my iphone my page comes up with a white bar down the side. See Pic 0171.

Thanks in advance.

  • Patrick

    Hi there @Jordie Oberg

    I hope you're well today!

    The only thing I can edit is the bottom part of the region.

    That can happen if the element is too small, and the background edit icon (the little pencil) overlaps & hides them. Please try exiting responsive mode first.

    I hit responsive and it goes all wonky in the viewer.

    That sounds like it's either a cache issue, or a conflict with another script/plugin running on your site, or with an addon/extension you have enabled in your browser.

    Please try first disabling any cache you have active on your site. Does your host have a cache routine on the server too perhaps? If so, you may Want to deactivate that, or have them do it. You really should have no cache active at all when configuring things on your site, ever (unless you want to lose what remains of your hair, lol).

    If that doesn't help, then check for possibly conflicting browser addons/extensions by selectively deactivating them. Also test using a different browser altogether.

    If that doesn't help, then deactivate all plugins on your site and test again.

    Also, on my iphone my page comes up with a white bar down the side.

    That could be due to an on-page element that has a fixed width that is larger than the display on your mobile. I would suggest first going over every element on the page with your browser's developer tools to check the width settings.

  • Dellex

    The only thing I can edit is the bottom part of the region.
    That can happen if the element is too small, and the background edit icon (the little pencil) overlaps & hides them. Please try exiting responsive mode first.

    This issue happens in normal mode and when I click the "change background" curled page icon, I can't edit the settings or delete the region that holds the gallery, only move the region size up or down, I also can't click the add region icons either. I moved the gallery to a different region and can't delete or remove the original region that housed the gallery.

    As well, Vinod told me to start a new post - but here his response/post - https://premium.wpmudev.org/forums/topic/cant-delete-or-modify-floating-region-once-i-added-a-video-to-it#post-944375

    thanks.

  • Dellex

    The WP Smush Plugin was causing the wonkyness in my visual when switching between default to 315px in responsive mode - as in the pic "help." I tried activating Smush again and the error occurred, is there any way I can use Smush and not have this error happen?

    As well, I can't figure out why I can't delete or edit the region I have the gallery in, I can only move the bottom of the region up and down. See pic above, help 2. I can't do this in either normal mode or responsive. I deactivated my plugins and no luck.

    FYI, Support Access is still active.

    THanks.

  • Dellex

    As well, I can't figure out why I can't delete or edit the region I have the gallery in, I can only move the bottom of the region up and down. See pic above, help 2. I can't do this in either normal mode or responsive. I deactivated my plugins and no luck.

    The issue with the region, mentioned above, I believe has to do with the CSS opacity code. I went through and did some trial and error and found the issue to the and region I mentioned, but have no idea how to fix it.

    If I go in and add opacity CSS to a region and save, after that it doesn't allow me to click the settings (gear icon) or delete (red x). Therefore, I can't go back in to change the CSS/opacity or delete the region.

    Any idea why the opacity css code is not allowing me to delete or edit the region? Does the opacity affect the settings/delete button so I can't click it?

    Thanks.

  • Sajid

    Hi @Dellex

    Hope you are doing good today :slight_smile:

    You can use WP Smush Pro plugin with upfront but deactivate it when you are editing the upfront. Yup, its not good but a workaround to get going.

    For region, I can see the support access is expired. Please enable support access and which screenshot you are referring to that region ?

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

  • Sajid

    Hi @Dellex

    Hope you are doing good today :slight_smile:

    You can use WP Smush Pro plugin with upfront but deactivate it when you are editing the upfront. Yup, its not good but a workaround to get going.

    For region, I can see the support access is expired. Please enable support access and which screenshot you are referring to that region ?

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

  • Sajid

    Hi @Dellex

    Hope you are doing good today :slight_smile:

    When you click on pencil icon. You can not edit the content inside that region. You can only change the region settings, increase/decrease height, set bg images etc..

    To make changes inside region click on "Finish editing background" green button and drag & drop elements there.

    For gallery images, I am also unable to change thumbnail size in responsive mode. I am reporting this behaviour to the developer to get insights or fix it if its a bug.

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

  • Dellex

    Hi there, I don't think you're understand my issue with, what I am assuming is the opacity code, or I am not explaining it clearly enough.

    See attached picture. I created that region, added in a background image, went in changed the opacity through css and hit save. I didn't like the opacity , so I went back to change it - now when I click the pencil, the "X" and the gear settings symbol neither of them can' be clicked. As well, the yellow "+" that add new regions can't be clicked, it is like the opacity css code applied to the buttons. Therefore, I can't delete or modify anything to do with that region's background.

    I tested this by adding in the opacity css code to see if this happened with another region's background and it did.

    I will reactive the access as your suggestion above did not address the correct issue. Thanks

  • Sajid

    Hi @Dellex

    Hope you are doing good today :slight_smile:

    Yes, I could replicate the same behaviour on my own test site. However I could not find the page/section where you used it.

    I am marking it as confirmed bug and hopefully it would be fixed in upcoming versions of upfront framework. Thanks for pointing out and bringing in our attention.

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

  • Sajid

    Hi Dellex

    Hope you are doing good today :slight_smile:

    No I could not find in on home page neither on other pages.

    Any way, I could replicate the issue with the help of your instructions. I have reported this issue to the developer and he will fix this issue as soon as possible.

    I will post an update here when it will be fixed or you can also see notification under WPMUDEV > Updates of your dashboard.

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.