Update cause https to have layout problem

Hi, due to update, I have layout problem in my https site.

  • Luís
    • Support

    Hi Mei ,

    Hope you’re doing well today!

    Can you try use this plugin to fix the insecure content:

    https://wordpress.org/plugins/ssl-insecure-content-fixer/

    If it’s doesn’t help, can you give us access to your admin panel, so we can check your issue?

    If you don’t already know, please, follow the link below, to see how enable the staff login:

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

    When you enable this option, please post again!

    Cheers, Luís

  • Luís
    • Support

    Hi Mei ,

    Hope you're doing well today!

    Some of the issues can be related to the cache, after enable the plugin "SSL Insecure Content Fixer" you should clear all the cache.

    Also, I corrected some images used in the CSS that was using "http" and it's not supposed. I made another test and all content are secure:

    Cheers, Luís

  • Predrag Dubajic
    • Support

    Hi Mei,

    Looks like this was a caching issue, I disabled and enabled caching and minification in W3TC and now the page is loading properly for me on phone.

    Can you try clearing your browser cache or opening the site in incognito mode to see if it’s loading properly for you now as well.

    Best regards,

    Predrag

  • Dimitris
    • Support Star

    Hey there Mei,

    I hope you're doing well and don't mind skipping in! :slight_smile:

    I just reached your site through my web browser (and the mobile device tool) and my Android phone and everything seemed smooth in your homepage, but I really can't tell if I missing something.

    Despite that, I was getting some errors in developer tools, like:

    so I went ahead and I just disabled all of the minification settings in W3TC (Performance -> General Settings -> Minify) and now I get no errors

    Can you please verify this on your end? You can find details for clearing your browser's cache in http://www.refreshyourcache.com/

    Kind regards,

    Dimitris

  • Dimitris
    • Support Star

    Hey there Mei,

    the slider image is stretch

    Well, that's really strange, in my end I don't even see the 3 first images at all, but only the last one. Did you try to restart your mobile browser? Also, under which mobile device do you test?

    The only way that I could find to surpass my problem, was by adding

    div.uslide-image img {
    margin: auto;
    }

    and erasing some custom CSS you've placed in slider element

    which may have added some blank space on top and bottom of slider images, but nevertheless, it was way better. Despite that, I inverted all of these changes, in case you have something in mind (design-wise) that I miss, especially with the aforementioned CSS snippet.

    Please advise,

    Dimitris

  • Mei
    • Site Builder, Child of Zeus

    Hi Dimitris,

    I used the android default internet browser. With the chrome browser, I get what you have too, seeing only the last image. How can I reactify this as this is a very long standing issue which I somehow still can’t get it solved. Awaiting your advise. Many thanks.

  • Dimitris
    • Support Star

    Hi Mei,

    I hope you’re doing really good today! :slight_smile:

    Did you try the changes in my previous reply? This could be a working solution, even though what I’d proposed to you (keeping in mind the dimensions of the images/slider) would be to disable the slider for mobile devices. And if you absolutely need something like that, just use plain-straight images. I believe that homepage will be faster and much ‘easier’ for users. :slight_smile:

    Warm regards,

    Dimitris

  • Mei
    • Site Builder, Child of Zeus

    Hi Dimitris,

    Yes, I have included that…. but somehow… this problem keep surfacing… now… with https… my home page look like the attached again. Hope you can reactify. Many thanks.

    PS: I do need the slider for mobile. Are there any way I can do this? Can I integrate LayerSlider WP into upfront?

  • Dimitris
    • Support Star

    Hey there Mei,

    thanks for granting us access. :slight_smile:

    I just inspected your website and seems that there's no error considering the mis-alignments in menus or anything else. Can you please confirm? Is there anything that you did that addressed this?

    PS: I do need the slider for mobile.

    I saw your slider again and I managed to get it work even under mobile by altering some of yours CSS rules as you can see in next screenshot. :slight_smile:

    Warm regards,

    Dimitris

  • Dimitris
    • Support Star

    Hey there Mei,

    hope you’re doing good today! :slight_smile:

    It seems that you’re dealing again with some mixed-content issues as your site is under a SSL certificate (https://) but there are (again) some assets trying to load through non-secure connection (http://).

    Did you make any changes since last time?

    Do you still use the plugin that Luis proposed you here https://premium.wpmudev.org/forums/topic/update-cause-https-to-have-layout-problem#post-1102241? (please keep in mind to clear all caches before testing any changes)

    If this persists for you, please consider granting us support access in order to have a better look and provide you a solution.

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

    Kind regards,

    Dimitris

  • Dimitris
    • Support Star

    Hello Mei,

    the SSL Insecure Content Fixer plugin should have taken care of most insecure content warnings.

    The obvious reason is the use of http:// instead of https:// (or even relative // path) either by you (if you hardcode image paths for example) or by another plugin.

    Despite that, I can now see that everything's is being loaded with no errors at all!

    Is this resolved now?

    If that's true, did you made any actions to resolve it?

    Please advise! :slight_smile:

    Kind regards,

    Dimitris

  • Mei
    • Site Builder, Child of Zeus

    Hi Dimitris,

    The issue still not resolved. Pls see attached. If you run why no padlock… you will see upfront contribute part of the problem… I am saying… even if there is a mix content error… the template shouldn't have broken up until this badly….

  • Adam Czajczyk
    • Support Gorilla

    Hello Mei!

    I checked the site and I can see the same result as shown on the screenshot. The “broken layout” issue is caused by insecure resources (resources loaded over http:// connection) being blocked by the browser.

    I read this entire thread again and I believe this part has been solved at some point so there must have been some changes made to the site though I’m not able to tell what was it. These changes may either be made by you or by some plugin that you are using or even a result of e.g. an older backup of the site being restored by host. That’s hard to tell.

    That said, I’d need to check the site again and review its configuration. It seems however that the support access that you granted has already expired. It’s time-valid so could you please grant it again for me? Please also try to make sure that it’s persistently open while we’re troubleshooting this (until you can confirm that the issue is finally solved).

    Let me know here when I can access the site.

    Best regards,

    Adam

  • Mei
    • Site Builder, Child of Zeus

    Hi Adam,

    Thanks for the reply.

    1. I have indeed installed some social plugin but other than that I did nothing.

    2. There is no restoration from an older backup site.

    I would like to check: what if I want to installed a new plugin? What will happened? Who can I check with to see if it will break https connection? Am I supposed to leave it untouched forever so that the https are not broken once fixed? I don’t think this is a good solution. I have experience with another template from a different developer and even though I have mixed content issue, the design template is not broken. I am feeling frustrated by this.

  • Adam Czajczyk
    • Support Gorilla

    Hello Mei!

    Thank you for granting access.

    I checked the site and I noticed that there’s a W3 Total Cache plugin enabled, performing full site caching. I cleared site’s cache and the site is working fine now. Please see for yourself. In case it was still breaking for you make sure that you also cleared your browser cache and give it another try.

    I browsed the site and it also seems to be fully SSL secured so all looks fine for me now.

    It’s important to know how W3 Total Cache (and other site caching tools) work: the site is basically saved to a temporary file and served from there for some time. If anything causes it to “break” there’s a chance that it will be saved to that file in that “broken” state and served this way even though the site itself is configured well.

    The bottom line is: if this happens again first thing to check is to empty W3 Total Cache cache. This may sometime happen after changes are made to site configuration so the best practice is either to disable caching option while making those changes and then enable it again or just empty the cache after changes are applied.

    I would like to check: what if I want to installed a new plugin? What will happened? Who can I check with to see if it will break https connection? Am I supposed to leave it untouched forever so that the https are not broken once fixed? I don’t think this is a good solution.

    No, you’re not expected to leave the site “untouched”. You may however need to empty site’s (W3 Total Cache) cache after adding/re-configuring a plugin or a theme (see explanation above).

    Best regards,

    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Mei!

    Did you cleared your browser cache? Here's what I see since my last post:

    Before I visited the site it was showing for me as well the way it's pictured on your screenshot. Since I emptied site's cache it's now displayed as it's shown on my screenshot above.

    That being said, I asked my colleagues to test this as well and it seems like it's only me that is seeing it working for now, which confirms that there's some additional issue involved unfortunately. I searched more then and I think it should be working now, my team mates confirm that it's loading fine for them too.

    It seems that the W3 TotatCache "Browser caching" option is interfering with your setup. Switching it off and clearing the cache helped so please check the site again (still, you may need to clear browser cache before doing this) and let me know if it's okay now.

    Best regards,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.