WPBakery responsiveness

Hello,

A question and an issue regarding WP Bakery:

– Question : does buying woodmart give the possibility to Activate WPBakery (WP Bakery often asks to “Activate”, and I can’t remember if it comes with Woodmart or not)

– Issue : On my homepage for some reason an element that is supposed to be displayed only in medium, small and extra-small screens is displayed on my laptop with a 1366×768 resolution (it is a product carrousel, see picture attached). Conversely, the element supposed to be displayed in large screens only isn’t displayed (it is a product tab, see picture attached). It’s like wpbakery thinks that my resolution is inferior to what it really is.
When I use Ctrl+Maj+I on Chrome to test the responsiveness, it works correctly.

NB : I use these variables in extra class names for responsiveness : vc_hidden-lg vc_hidden-md vc_hidden-sm vc_hidden-xs

Links to my website & passwords below in Private, all unnecessary plugins are deactivated.

Attachments:

You must be logged in to view attached files.

Here’s the second picture attached (size initially too large)

Attachments:

You must be logged in to view attached files.

Hello,

WPBakery Page Builder and Revolution slider come bundled with our theme but they can’t be activated with our purchase code. Actually, you don’t need to do this. Only in case you want to get free premium support from its author, you can purchase it from Codecanyon. But it is not necessary since we will always provide you with the latest updates.

Check if the columns are set to be hidden on certain devices. https://wpbakery.com/video-academy/control-elements-different-devices-responsive-column-controls/

Best Regards

Hello Elise,
Regarding my question: ok got it.
Regarding my issue : nope that’s not it. My page is well configured I think (I say that because it responds well when checking my page under Chrome’s test tool with Ctrl+Maj+I).
Thank you,
Paul

Hello,

NB : I use these variables in extra class names for responsiveness : vc_hidden-lg vc_hidden-md vc_hidden-sm vc_hidden-xs

These classes hide the element. Remove them and check. Use this option https://wpbakery.com/video-academy/control-elements-different-devices-responsive-column-controls/

Best Regards

Elise,

I don’t use all of them at the same time of course ; I have been using them all over my website for a year without any problem and I understand how they work. All I am saying is that for only 1 element in particular, my ~1300×800 screen is not recognized as a Large Screen for a reason I don’t know. In this resolution, “vc_hidden-lg” applies, and it shouldn’t.

Best,

Paul

Hello,

NOS ESSENTIELS appears om the large screens what block do you have problem with, provide page URL and screen.

Best Regards

The issue is right after “Nos essentiels” : on large screens, it is supposed to be a Product tab (with 8 products) and on other screens (medium, small, x-small) it is supposed to be a caroussel.

Yet, on my 1366×768 screen, I see the carrousel instead of the product tab (all other elements of the page behave normally)

Page URL & screen are given in my first message.

Thank you,

P

Hello,

Remove all these classes from all the rows https://prnt.sc/oslklx

Best Regards

If I remove vc_hidden-lg, the content won’t be hidden on large screens anymore……!

Come on, Woodmart is great but maybe a little too great for the support capabilities you have, it’s high time you realize this. I understand you have a lot of clients but that is precisely the reason why you should hire more staff to help with the support : EVERY time I have had an issue it needed at least 4-5 messages so that you start taking the issue seriously or you actually read all the info that is provided, every – single – time.

Most first suggestions are “oh you have an issue with “item X”? Why don’t you delete it”

You are doing a great job with the theme itself, and I don’t even know how you can keep up with so many requests for support at this time, but that can’t be a 1-person job……….

Sorry for the misunderstanding, but visual composer hide classes is working correctly on your site. This is CSS from the visual composer plugin that is responsible for the work of the following classes:

@media (max-width:767px) {
	.vc_hidden-xs {
		display: none!important
	}
}

@media (min-width:768px) and (max-width:991px) {
	.vc_hidden-sm {
		display: none!important
	}
}

@media (min-width:992px) and (max-width:1199px) {
	.vc_hidden-md {
		display: none!important
	}
}

@media (min-width:1200px) {
	.vc_hidden-lg {
		display: none!important
	}
}

vc_hidden-xs – hide element from 0 to 767px,
vc_hidden-sm – hide element from 768px to 991px,
vc_hidden-md – hide element from 992 to 1199px,
vc_hidden-lg – hide element from 1200px and all above.

You have added vc_hidden-xs, vc_hidden-sm, vc_hidden-md (https://prnt.sc/osnerc) classes to your grid product element. That means that your grid product element will be hidden from 0 to 1199px device width.

Also, you have added your vc_hidden-lg to carousel product element (http://prntscr.com/osnibn) which makes your carousel product element visible from 0 to 1199px and hidden from 1200px and above.

For now, the switch point between your products element is 1199-1200px. We have tested in on different resolutions and it looks correct for us.

Resolution 1920×1080 – https://prnt.sc/osnmac
Resolution 1366×768 https://prnt.sc/osnmon

Regards

Hello Bogdan,

Thank you for your reply.

Absolutely, again I know how these elements work, so all I can say is that I fully agree with what you described. Indeed, simulation obtained by clicking Ctrl+Maj+I on Google Chrome shows that the page is set up correctly : I have the same results as the ones you attached, meaning on a large screen (wether 1366px or 1920px large), I see the Product Tab, and the Carrousel is hidden.

In real life though, it is different. For the past days, this has been working as usual when being on a 1920×1080 laptop, BUT as soon as I switch the resolution to 1366 x 768 on my computer, I see the Carrousel instead of the product tab, just as if I was using a phone or a tablet.

I don’t know the reason for this, hence my post here.

On a side note, I hope that Elise is not upset by my comment about support. I’ll point out again that I wouln’t do any better myself, I think she does all she can, but that 1 person is not enough to provide suitable support to the thousands of clients you have and deserve well. I note that I have read many mentions of this by other customers in the past months.

Thank you for your investigation,

Best,

P

Hi,

We have tested your site in different devices with a different browser and any of these did not face the following problem. CSS @media rule cant be set or changed by our theme in other ways, so this issue can be caused by our theme.

We suggest you check the following issue on other devices and check your browser and device display settings.

Regards

[Author]

Posts