Hi,
The last section and footer are missing on mobile view in Chrome. When I scale my desktop browser window it looks like there is white block covering the bottom of my site and it’s moving along as I scale the site (make browsser window bigger and smaller). In Cornerstone and Firefox the site looks just fine. This happens only one page. Do you know what this is about and how can I fix it?
Thank you for your help!
Hey @SSE,
Can you please run a compatibility test for me? You can do it by deactivating all the other plugins and then activate them one by one to find out the conflicting plugin. It will help us further debug the issue. I checked chrome console but no error there, Can you provide us server error log?
Regards
Hi rahul and thank you for your response.
I did the compatibility test the way you described and problem came back when I activated Woocommerce. I will add error log in secure note.
Hi There,
Thank you for the log, but I believe this issue is more of how you setup your page contents. This is more than just a responsive issue, the way you structure your page might be accounted for this issue, I advice you remove the huge and negatives margins/paddings that you applied on the sections and any elements and set it back to there default margins/padding. This thread is going be a long one anyway, so we might start in the correct foot.
On your footer content, it seems you added a lot of contents there. Try removing those and see if the footer shows up. There might be a syntax error there.
And if you have any caching plugin/feature, please clear and deactivate it while we tackle this issues.
Cheers!
Ok,
At first could you tell me how to do this without affecting my site? Can I make a copy of my site or something (I tried to search fot instructions, but I couldn’t find solution)? I appologize, I’m not very good at this.
Second question: I see that Themeco/Apex offers custom development. Is solving this matter that kind of development I could pay to be done?
Thanks.
Hi rahul,
I kept investigating this problem and I found out that using Woocomerce product page shortcode is causing it.
[product_page id=“537”]
Other product shortcodes [product id=“537”], [add_to_cart id=“537”] are working fine.
My footer is working ok in every other page and removing the content did not affect to this issue.
I do not have ane caching plugin, at least not that I know of.
Hi there,
The problem seems to be originating from a missing closing HTML tag ( /> ) somewhere. You may need to investigate that problem, The Chrome browser does not recognize and puts the footer inside the last section. The firefox somehow understands the mistake.
Both check your Footer widget codes and last section codes for missing HTML closing tags.
Thank you.
Hi Christopher,
Thank you for your reply.
I tried to check the codes but I did not find missing ( />) tag. I have not edited any codes while making my site, I just use Cornerstone and Customizer + additional css.
Could you please give me more help to solve this frustrating problem?
Hi there,
Could be cache, it’s now working on my created test page, or a combination of multiple issues in that test page you provided. Could you try it again?
Else, you may try deleting each element/content at a time while testing it, then you’ll find what’s causing this issue.
Thanks.
Hi iam,
Thank you for your help. I created more test pages and added elements one by one as told me to. I found out that the bottom of the page starts to disappear when the page has lots of content and Woocommerce product page shortcode is added on the page. It seems like there is a certain length of content the page shows, and when the amount of content crosses that limit a white box covers that part of the page. I edited the test page you made to show you that. In my tests the type of content did not matter and when I remove this specific shortcode, the page starts to show normally.
What should I do now?
Thanks.
Hello There,
Please keep in mind that [product_page] shortcode show a full single product page by ID or SKU. If there are unclosed or custom html in your product description, this could potentially messed up the layout of the page. I would suggest that you avoid any html in the product description and make use of the plain text instead to avoid any conflict.
Hope this helps.
Hi,
Thank you again. Unfortunately your advice did not fix the issue.
I made a new product with plain text and added that product using product page shortcode to test page. That worked ok, but when I added a product image, the problem came back again. Because of that I removed all css in Customizer that has something to do with Woocommerce gallery or anything (I have custom css for Woocommerce buttons too), but that did not make a difference. Only removing the product image removed the problem.
I don’t understand this, please help.
Hello There,
I have made some changes to the test page. Please check it out here: https://sirkolke.com/test/
I used this shortcode:
<div>[product_page id="537"]</div>
It should always be in one line because the text element will automatically convert line breaks and new lines into <br> and <p> tags.
Hope this helps. Please let us know how it goes.
Hi,
Thank you again. Unfortunately the problem still remains the same when browser window is scaled to smaller.
What next?
Hello There,
Thanks for updating in! I can confirmed that the problem still exist. This is due to the PhotoSwipe script used in the shortcode. The photoswipe element stays on top of the last section and your footer area. This is why it is no longer showing. Temporarily, we can make use a custom css to make sure that the elements stay on top of the Photoswipe layer. Please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)
footer,
.x-section {
z-index: 99999999999;
}
Hope this helps. Please let us know how it goes.
Thank you very much!
This code was the answer to this problem.
You made my day! <3
What do you mean by temporaral solution?
Hello @SSE,
Glad it works out for you. I meant temporary because we still need to test PhotoSwipe script in X. You do not need to worry because the css code will always work without any conflicts for future updates.
Best Regards.
Thank you very much!
You’re welcome as always.