WC Support ruins site footer structure after it’s activation

Hi @2buy
thanks for using WC Support System plugin and sorry for the problem you’re having.
Inspecting the page https://www.2buy.xyz/support/ I’m not able to see any css rule coming from this plugin, especially about the four columns in the footer, please have a look here:
https://www.ilghera.com/wp-content/uploads/2021/08/Schermata-da-2021-08-30-08-16-59.png
Can you try to disable any other plugin except this and WooCommerce? Did you try a different theme for a second, just to see if everything works as expected?
Please let me have any other useful information, if a bug will be confirmed I will release an update asap.
Thanks.

Dear ilGhera,

I’ve dropped all plugins into an “off” folder and just let
– woocommerce
– wc-cuspport-system
within the plugins folder.

But still, the problem persits.
Switching the theme will not work, as the footer menu items are added into the widget area and if I switch from “shoptimizer” to the “store front” theme then those widgets are gone.

Screenshot > https://www.screencast.com/t/AwPQWxpa

I hope you will be able to find a solution for that.

Best regards, Alex

Hi,
I made a test using the Store Front theme and everything seems to work as expected.

You can do the same by adding an element to every one of the four widget areas available in the footer, something like this:
screenshot.png

I’m getting the same result with all the themes, it would be useful to try with the one you’re using, please let me have it if you can, I will make a test with it.

Thanks.

Hi ilGhera,

ok – I would like to send you my theme. Please send me an email (i.e. via private message or any other idea from your end), to answer add the theme to your private address.

Best, Alex

Sure, here it is:
[email protected]

Thanks.

Hi again,

I’ve just send you the theme via email and I am looking forward to your results.

Thanks, Alex

Ok thanks, let’s continue by email.

Hi ilGhera,

after again checking?on?my?page, unfortunately I cannot agree with your info from?the?eMail that?it?is working proper?on your end while?testing my theme in use.

It’s all about the support page itself where your plugin shortcode has been added. All other pages are working fine as expected, but not at the support page. There we have the different alignment?of footer widgets side by side which shall be line by line at the mobile approach.

Please check my short video explainer to see the problem again.
Screen Video > https://www.screencast.com/t/mkAZLbaf

Hopefully you find the problem maker situation.
Best regards, Alex

• This reply was modified 3 years, 2 months ago by 2buy.
• This reply was modified 3 years, 2 months ago by 2buy.

Hi Alex,
there is nothing new in your video.
I’m not saying that you’re not having the problem on your side, the support page is breaking your site’s footer.
What I said in the email is that I tried to reproduce the bug using 4, 5 different themes and I was not able to do that, even with the theme you gave me.

I suggested you several times to make a test with:

• StoreFront theme
• Your theme [parent]

Did you do that?
My idea is that the problem is in your child theme, the one with your custom code and the only one I didn’t try.

Please do some tests and let me have more details or I will be not able to help.

Kind regards.

Dear ilGhera,

ok – I’ve tested again with storefront as well. There it works, but switching back to my theme child or parrent then the problem persits.

Screen Video: https://www.screencast.com/t/F4EkIg1mCUOM

Any ideas how to solve that?

Best regards, Alex

Hi @2buy,
you can simply add a media query like this in you child-theme css file:

@media screen and (max-width: 992px) {
    .below-content .col-full, footer .col-full {
        flex-direction: columns;
    }
    .below-content .widget, footer .widget {
        padding-bottom: 2rem;
    }
}

Hope this helps!

Hi again,

I’ added your css code above using woody snippets which is also used for other code snippets, BUT without positive result.

Screenshot > https://www.screencast.com/t/100zIQxAEO

Do you have any further ideas?

Best regards, Alex

Hi,
there is a typo in the css code, flex-direction must be set to column.

Also, add an 100% width to the single widget.

Here the full code:

@media screen and (max-width: 992px) {
    .below-content .col-full, footer .col-full {
        flex-direction: column;
    }
    .below-content .widget, footer .widget {
        width: 100%;
        padding-bottom: 2rem;
    }
}

• This reply was modified 3 years, 2 months ago by ilGhera.

Hi ilGhera,

it works!!! THANKY YOU.

Best regards, Alex

• This reply was modified 3 years, 2 months ago by 2buy.