Isotope not initialized

Hello,

First of all, thank you for this amazing theme.
I was updating tablet/mobile CSS and after I clicked Save I clicked browser Stop by mistake. After clicking Save again, it no longer shows the changes I made in the last hour and I have a console error:

isotope.pkgd.min.js?ver=6.1:20 isotope not initialized. Cannot call methods, i.e. $().isotope(“layout”)
/wp-content/plugins/js_composer/assets/lib/bower/isotope/dist/isotope.pkgd.min.js?ver=6.1

I tried disabling plugins, clearing WP Rocket + Cloudflare, activating other theme and Woodmart back, reinstalled WPBakery, nothing seems to work.

Would appreciate any suggestion on this point, the current mobile css is broken.

Thank you!

Later Edit: Isotope issue seems to appear only when logged in, but CSS fails to be read from Custom CSS either way;

Attachments:

You must be logged in to view attached files.

Later Edit: After rebuilding CSS for Woodmart / WPBakery and disabling lazy loading, the isotope error is gone. However, custom CSS is still not showing properly 🙁

Hello,

Thank you so much for contacting our support center.

We see a lot of custom CSS added in our Theme Settings. Could you please clarify what exactly is wrong about the custom CSS section?

Kind Regards
XTemos Studio

Hello,

Thank you for your answer!
There are styled elements on mobile which worked before but after stopping save / saving again, they are gone and now they refuse to show.
Could you please compare the last few lines of mobile CSS with the mobile frontend? You can see the differences.

I tried even clearing all custom CSS but nothing happened, so I put it back.

Not quite sure how else to present this issue, please let me know if I should be more specific.

Attachments:

You must be logged in to view attached files.

Can I please get some support??

Hello,

We have compared your custom CSS last lines in Theme Settings with the one on your website and see that they are identical https://gyazo.com/c4a60ed2e465f2d1a5abfd0c82e9172a
https://gyazo.com/d8e4ea9f7a3c6d9dd5d365a0e1950702
Check your CSS code since it seems to contain some errors and that is why it may not work on the frontend.

Kind Regards

My CSS does not contain any errors, reason also why it works in your test on other website.
As I explained, I hit SAVE in Woodmart settings and stopped, this made some CSS to not be read anymore. It’s about the last ~10 lines of CSS in tablet and mobile versions.

But we just tested “Save” button and it works well for us. To test this functionality, we tried to add the following code instead of all your custom CSS and hides everything on the frontend

* {
	display: none;
}

Hello,

The specific CSS I have set for mobile and tablet won’t show. It does save data, but those exact lines refuse to be read on frontend even though they are saved in custom CSS.

Please see the attached screenshot.

PS: The arrow for .site-mobile.menu should be pointing at .site-mobile-menu .sub-menu. But it’s not there, you got the point.

Attachments:

You must be logged in to view attached files.

Hello,

You have added the code for mobile in landscape orientation but check your website (as we see from your screenshot) on mobile in portrait mode.

Hello,

The landscape code is exactly the same as for portrait, I just wrote above I put the arrow wrong in the screenshot. Can you PLEASE focus a little bit?! Then WHY it doesn’t show in landscape either?!

1. The code is not exactly the same. They have different number of lines.

2. It works on landscape mode actually.

3. Your code contains errors as I mentiond from the very beginning. I have removed all the code except a few lines to be sure to remove all the broken part. Now check how it works.

I post your original code here so you can restore it

for landscape

.search-button-icon {
	color:#FFF;
}
.mobile-nav .searchform input[type=text] {
    border-bottom: 1px solid #fff32a;
    background: #252525 !important;
		text-transform: uppercase;
}
.whb-header-bottom-inner {
    height: 70px;
}
.page-title {
    padding: 50px 0;
}
.title-line-one .product-grid-item.col-6 .product-title, .title-line-two .product-grid-item.col-6 .product-title {
    line-height: inherit;
}
.whb-header-bottom {
    height: 70px;
}
.product-grid-item .woodmart-buttons {
    background-color: #dededeb3;
}
.nav-link-text {
		color: white;
}
.dropdowns-color-light .site-mobile-menu .sub-menu li a {
    background-color: #2b2b2b;
		text-transform: uppercase;
    padding-left: 30px;
}
.dropdowns-color-light .woodmart-search-dropdown .searchsubmit, .dropdowns-color-light .mobile-nav .searchsubmit {
    color: #fff32a;
}
.mobile-nav-tabs .mobile-tab-title:after {
    background-color: #00000000;
		font-size: 15px;
}
.dropdowns-color-light .mobile-nav-tabs .mobile-tab-title {
    font-size: 15px;
}
.dropdowns-color-light .mobile-nav-tabs .active {
    border-bottom: 1px solid #fff32a;
		font-size: 15px;
}
.dropdowns-color-light .site-mobile-menu li a {
    font-size: 15px;
}
.dropdowns-color-light .mobile-nav .suggestion-title {
    font-weight: 400;
}
.dropdowns-color-light .mobile-nav .suggestion-price .amount
    font-weight: 500;
    margin: 60px;
}

for mobile

.search-button-icon {
	color:#FFF;
}
.mobile-nav .searchform input[type=text] {
    border-bottom: 1px solid #fff32a;
    background: #252525;
		text-transform: uppercase;
}
.nav-link-text {
		color: white;
}
.product-grid-item .woodmart-buttons {
    background-color: #dededeb3;
}
.dropdowns-color-light .site-mobile-menu .sub-menu li a {
    background-color: #2b2b2b;
		text-transform: uppercase;
    padding-left: 30px;
}
.dropdowns-color-light .woodmart-search-dropdown .searchsubmit, .dropdowns-color-light .mobile-nav .searchsubmit {
    color: #fff32a;
}
.mobile-nav-tabs .mobile-tab-title:after {
    background-color: #00000000;
}
.dropdowns-color-light .mobile-nav-tabs .mobile-tab-title {
    font-size: 15px;
}
.dropdowns-color-light .mobile-nav-tabs .active {
    border-bottom: 1px solid #fff32a;
		font-size: 15px;
}
.dropdowns-color-light .site-mobile-menu li a {
    font-size: 15px;
}
.dropdowns-color-light .mobile-nav .suggestion-title {
    font-weight: 400;
}
.dropdowns-color-light .mobile-nav .suggestion-price .amount
    font-weight: 500;
    margin: 60px;
}

Ok, I copied a little bit of code back. Please see the attached screenshot, it doesn’t render the change.
Can you please paste back the entire code and send me a screenshot of it being stylized properly? Or put any random code from above bit by bit and see if anything changes in front-end.

Thank you.

Attachments:

You must be logged in to view attached files.

We see that code is applied correctly now https://gyazo.com/8de27f3f0a6a5d1e70a6a7b39e3dd7ae

Please follow these steps:
– Delete entire code from Mobile Landscape and Mobile
– Copy all code from Tablet to Mobile and Mobile Landscape
– Mobile doesn’t follow instructions – https://streamable.com/g0gacj

As we wrote you initially, your code contains errors. We already showed you that there is nothing wrong with our theme’s Custom CSS section and it works exactly as expected. Sorry, but fixing your custom CSS that is not related to our theme is out of our theme support scope.

I still think something went crazy after that save, considering the EXACT same code works fine for tablet but not for mobile.

Anyway, thanks for trying. Great theme nevertheless.

Yes, codes are the same, but if the landscape has some unclosed bracket for example, all other codes will stop working.

[Author]

Posts