New Visual Composer Update Messed Up Responsiveness

[cour10e22]

Hi there!

I’m not sure if this is something you could help me with, but have you noticed some issues with the new Visual Composer update? I updated it and had to revert back to the old version because it completely messed up the responsive aspect of the site and things were not shrinking/adjusting the same way that they did with the old version. I understand that it came out with some new functionality to have more control over how columns appear on different size devices, but it really messed things up – I don’t know if it is in conflict with your responsive CSS for the theme or not. Any insights you have would be great, otherwise I’ll look to the VC people for help.

Also, when new plugin versions come out, is there a good way to test them out on the site beforehand to make sure things are working correctly, or is the only option to update, see how things go, and then revert if necessary? Wondering what your workflow might be.

Thanks!

Courtney

[FocuxTheme Support]

Hi

Maybe the new version of visual composer has been changed the some HTML makeup, not sure.
Is it possible to send me the screenshot for showing the question part?

I have tested the theme under visual composer 4.3, my demo looks normal.

Thanks

[cour10e22]

Hi there!

Sorry for the delay – I had to figure out how to copy my site to a subdomain to test the new plugin version.

Here’s my site with the older version of Visual Composer (works fine):
courtneybrillhart.com

Here’s the site with the newest version of Visual Composer (is not working well):
cbdev.courtneybrillhart.com

Any thoughts as to why the responsive-ness is breaking here?

Thank you!

Courtney

[cour10e22]

Hi Johnny,

When you shrink the browser window when using the older VC version vs. the newer VC version, it’s very different and the newer VC version doesn’t work nearly as well. Even if I remove the padding, it still has issues. I’ve taken some screenshots of a few examples.

Old VC version at around tablet size: https://drive.google.com/file/d/0B5DGzq5mAuk2QzVhNlBiZ3JNZXc/edit?usp=sharing
New VC version at around tablet size: https://drive.google.com/file/d/0B5DGzq5mAuk2R3B1WFJDRlUycHM/edit?usp=sharing

Old VC version at phone size: https://drive.google.com/file/d/0B5DGzq5mAuk2Z19KUzBSZ3pjUFk/edit?usp=sharing
New VC version at phone size: https://drive.google.com/file/d/0B5DGzq5mAuk2N2JYaUJBLTJDSzg/edit?usp=sharing

You can see how elements don’t rejigger or resize nearly as nicely with the new version of VC implemented. Not sure what to do. It looks like VC updated again with 4.3.2, so I wonder if that will fix. How do I update to the latest plugin version outside of a theme update from you?

Thank you!

Courtney

[FocuxTheme Support]

Please send me your email, I will send the latest visual composer to you.
If the responsive layout still not working fine after you update the plugin, please post your wordpress login details with private reply, I think I need to add some custom CSS, because the plugin has been changed their CSS grid…

Thanks

[cour10e22]

This reply has been marked as private.

[FocuxTheme Support]

Sent!

[cour10e22]

Hi there!

Looks like VC 4.3.2 did not fix the problem. I also removed the left-side padding and it seems even worse now. I will reply again with login credentials. Please note that this is a test environment, but the permalinks are still going to the live site – need to fix that.

Thanks!

Courtney

[cour10e22]

This reply has been marked as private.

[FocuxTheme Support]

Hi

I have already fixed your issues, and I’m updating the theme, I will submit the new version V1.13 on themeforest after a while.
You will receive the email notification after the new version was approved.

Thanks

[cour10e22]

Thanks, just got it! Will test it out and let you know if any problems arise.

[FocuxTheme Support]

OK

[cour10e22]

This reply has been marked as private.

[FocuxTheme Support]

Hi

Sent, please check your inbox.

[FocuxTheme Support]

Hi

I found the new version of VC plugin has been changed almost all the class selector name so that the responsive became invalid,
Please download my updated CSS files https://www.dropbox.com/s/5i28x6mcm5xglc0/new_css_for_vc_4.3.3.zip?dl=0

Unzip the file, upload these two css file to /wp-content/themes/Samsara/css/ folder, override the old files.

Thanks

[cour10e22]

Awesome! It is almost there!

Still having a bit of issues. Here are some screenshots.

Site with Samsara v1.13 and Visual Composer 4.2.3: https://drive.google.com/open?id=0B5DGzq5mAuk2Q0diYnBXUG56cVk&authuser=0

Site with Samsara v1.13, Visual Composer 4.3.3 & the new CSS you sent along: https://drive.google.com/open?id=0B5DGzq5mAuk2LUpoNkc5eEwxZWc&authuser=0

Thank you!

[FocuxTheme Support]

Hi

I checked http://cbdev.courtneybrillhart.com/ site (VC4.3.3), When I reduced the window size, the responsive layout is still not working fine, so I checked http://cbdev.courtneybrillhart.com/wp-content/themes/Samsara/css/responsive.css file, I found you haven’t override the new CSS files which I sent to you yesterday?

[cour10e22]

That’s odd – I definitely replaced it yesterday & I just replaced it again. Is it showing up correctly now?

[FocuxTheme Support]

I checked your layout.css file, I found the following CSS, it’s added by yourself?

@media (min-width: 768px){
	body .vc_col-sm-6 {
	   width: 48%;
	}
}

You can add padding:0 20px; into this class.

However, I think it’s not the best solution, I will keep to improve it in the next version.

Thanks

[cour10e22]

Hi there!

Interesting – I definitely did not add that myself to layout.css. I checked the revised “layout.css” file you had sent to my inbox for VC 4.3.3 and it looks like it’s in there. I added the padding you suggested and it seems to be working better now (http://cbdev.courtneybrillhart.com), though still not quite as smooth as appearing on http://courtneybrillhart.com.

Also, for http://courtneybrillhart.com, I reverted back to Samsara 1.12 because something happened in 1.13 that caused the Resume page to not have two columns anymore, so it’s now running VC 4.2.3 & Samsara 1.12 & cbdev is running VC 4.3.3 & Samsara 1.13 with updated layout.css & responsive.css from you, plus adding the padding you suggested to that class.

Thank you so much!

Courtney

[FocuxTheme Support]

I’m planning to improve the responsive layout globally in the next version in order to make the theme compatible with VC 4.3.x

Now, I just have a quick solution is add the following CSS into layout.css or Samsara options > Custom styles > CSS code

body .vc_row{margin-right:0;} 

Thanks

[cour10e22]

Beautiful! Thanks so much – it’s nice working through these things with you. Really appreciate the support!

Best,

Courtney

[FocuxTheme Support]

It’s my pleasure!

[FocuxTheme Support]

Hi

I checked the site with new visual composer and compare with the old version, I’m not sure I understood you correct,
Did you mean the “Activities & Interests” section is looks not working well? The thumbnails are aligned to right?
If so, I found you have set padding-left to 30px for the wrapper of this section, if you cancel this setting, it will be fine.

If I understood incorrect, could you please post a screenshot to showing the question part?

Thanks

[cour10e22]

Hi Johnny,

I’ve installed the Samsara v1.13 and am running Visual Composer v4.3.3. It looks like the responsiveness is somewhat back to normal, but there are still some issues. For some reason, I’m only having these issues on the home page while the internal pages are working fine. On the home page, it seems like responsiveness is broken entirely for (min-width: 768px) and (max-width: 959px).

You can see the differences when resizing the browser at http://courtneybrillhart.com vs. http://cbdev.courtneybrillhart.com.

Here’s a screenshot where it’s working properly with Samsara v1.13 and Visual Composer 4.2.3: https://drive.google.com/file/d/0B5DGzq5mAuk2YmhoREVFS2Q0cTA/edit?usp=sharing

And here’s a screenshot where the responsiveness is broken with Samsara v1.13 and Visual Composer 4.3.3: https://drive.google.com/file/d/0B5DGzq5mAuk2ZmZza1NOb2hJWkE/edit?usp=sharing

Also, for the area on the home page where I have photos (6 columns), with Samsara v1.13 and VC 4.2.3, they have nice space between them: https://drive.google.com/open?id=0B5DGzq5mAuk2NzN1Umc4ckF1eTg&authuser=0

But with Samsara v1.13 and VC 4.3.3, there’s no space: https://drive.google.com/file/d/0B5DGzq5mAuk2aHp3ZFJ0QWx4aU0/edit?usp=sharing

Thank you for your help, as always! 🙂

Courtney

[Author]

Posts