Footer Elements Duplicated in Screen Size Preview

I have setup 3 separate footer layouts to accommodate different screen sizes. In order to do this I have setup 3 pairs of bars that are each only visible at certain screen sizes. Recently, in some of the views in the footer builder, certain elements have duplicated even though they are in a bar that is set to not be visible in that view. Also, at the bottom of the footer, there is a small white bar with 3 semi colons. I haven’t been able to find where that is coming from.

Thank you.

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

The URL is test.completegaragesolutions.com/test

The semi colons appear both in the builder preview as well as the webpage as rendered in the browser. However, the duplicate elements in the footer only appear in the screen size preview within the cornerstone builder. When testing on multiple screen sizes in a browser the elements are not duplicated. But while trying to build out the footer it has made it difficult to do so. Thank you

Hi there,

Seems to be caused broken HTML elements, you can check it here https://validator.w3.org/nu/?doc=http%3A%2F%2Ftest.completegaragesolutions.com%2Ftest%2F

With broken elements (not properly closed elements, or stray elements with no opening), other relative elements will be affected especially elements that comes after the broken content, so yes, the footer is affected. The error you need to fix from that result are #4, 5, 15, 16, 17, 18, 19, 20. Usually, one mistake could cause chain of error, maybe it looks many, but fixing one could fix them all.

Plus, since you’re adding dedicated footer bars for each device, then don’t apply visibility to elements, example, a footer bar are meant to be hidden in mobile, then hide it. No need to add visibility option in the image on that footer bar. OR perhaps you’re trying to display the same instance of image to desktop while hiding container? That’s not possible since the image is a child of that container.

Thanks!

Would the broken html elements only affect the views in the theme builder? The elements are not duplicating when viewing in the browser, only when that screen size is being manipulated by the theme builder. That seems to me like something is wrong with the theme code. Let me know your thoughts.

I’ve also noticed the duplicate elements issue arising in other areas besides the footer. When selecting to hide them when on a particular screen size, they display on some screen sizes that they shouldn’t but are hidden on others. This seems to me like an issue with the cornerstone builder and not the HTML because this issue does not carry over to the webpage in a browser, ONLY while selecting different screen sizes in cornerstone. Please advise

Hi there,

I checked the Header and Footer builder on my installation and could not find the same issue even inside the builder itself.

I suggest that you do a test regarding your case. Add a new page with no content. Then go to the Footer builder and add a new footer with just 4 bars with elements inside. And make those bars appear in different screen sizes. Then assign that footer to that page. You will see that it should work ok. If not then get back to us with the URL/User/Pass of your website with the name of the newly created footer and the name of the newly added page to follow up using the Secure Note functionality of the post.

Thank you.

Thank you for your suggestions. As you have instructed above, I have created a blank test page and assigned a new footer to that page. I have created four bars, each with a container and one element. While experimenting with the blank page and fresh footer, I have not been able to reproduce the duplicating elements issue, however some bars are appearing on screen sizes that they should not be. For example the 980px - 1199px view has all of the bars visible when it should only have one. There are multiple instances of that behavior. Again this does not carry over to the page in the web browser. The issue only occurs in the builder. I’ve attached the information that you requested in the secure note.

Thank you for your help!

Interestingly enough, I’ve found a temporary fix. In chrome, while above 80% zoom, the elements duplicate, however at 80% zoom or below the elements do not duplicate. I have cleared temporary internet files to see if that would resolve and it did not. I’ve attached screenshots of the footer at 80% zoom no duplicates and above 80% zoom with duplicates. Hope this helps.

Hi there,

You shouldn’t base your design at browser’s zoom level, not all browsers have that. And please provide your username. I checked and I don’t see any duplication on the front.

About broken element, it always happens before the affected elements, and it’s in the content before the footer.

Thanks!

I haven’t based my design on the browsers zoom level. I was commenting that the elements were only duplicated in the builder at a certain zoom level. And yes I stated a few times that its not affecting the front end, only the builder. But that makes it difficult to build a page layout when elements are duplicating. I’ve included the URL and login credentials in the secure note.

Thanks

Hi There,

I have zoomed in and out multiple times in the footer builder and I did not see any content being duplicated as before (I have seen it happen last time I checked your website a couple of weeks ago)

Did you manage to solve it?

If not make sure to clear your browser cache and if the issue persists, please provide a step by step of how we can duplicate.

Thank you

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.