Issue with Products Grid

Hello,

we’re occurring an issue with Products Grid in some posts where we was using that feature since many months. The issue is the layout from mobile devices. Desktop layout is as we aspected, but from smartphone it is terrible. Please take a look to the screenshots.

We just re-saved this post because we did some edit, so maybe it could be caused by that. Could you help us to fix it?

Thanks.

Hello,

Please deactivate all the plugins not related to the theme and switch the parent theme, remove all the code editing and check the issue, if the problem remains, leave the plugins not activated and provide the valid site admin access to the private area.

We fix the problem if it is caused by our theme. Our support does not cover fixing third parties codes.

Best Regards

Hi Elise,

I always surprise about your answers. When I contact the WooCommerce free support by chat, they answer trying to replicate the issue first. Here instead I pay your support and your answers are always related to others plugin. It’s very easy for you to test it. Why can’t you do it?

Let me say that we haven’t any CSS related to that classes. And that the columns always worked well. In fact this post is online since more than one year and at the begin it worked as we expected. Yesterday we updated the post and the result is that one that you can see in the screenshot.

Please help us!

Hello,

By default, there is no problem with the Product Grid. If there any problems, the reason is 99.9% either third parties plugins or custom code. Our support does not cover fixing third parties plugins as well as custom code. That is just our support policy. You know we always do our best to bo beyond the support frame and always help if we can. At the same time, we cannot undertake all not related issues.

The layouts are broken. Please take our demo site and compare. There are no problems on our demo site. Please deactivate all the plugin not related to the theme, remove the custom code, and check the issue, then activate the plugins one by one and check if the plugin causes the problem. Then add you custom code and check.

Best Regards

We haven’t any CSS that influences the specific Product Grid class. I searched for a page with Product Grid with only 2 columns in your demo, but I didn’t find it. Are you really sure that is it not a bug? Can I ask you to create a Product Grid with 2 columns locally? I think that it will takes to you only one minute.

Hello,

Please provide the valid site admin access to the private area.

Best Regards

We can’t provide you ad admin access right now. Could you try to create a Product Grid in a test site, please? I’m sure that you have it one 🙂

In the meanwhile I add that we retried also without any cache on. It doesn’t work normally. Believe me. All CSS works in our web site, this is the one that do not works.

Hello,

The reason is this block https://gyazo.com/3faaf10b57a10d3bcd07e4d56e5c8f8c I need access to check how this block occurs there.

Deactivate all the plugins not related to the theme and switch the parent theme, check the issue.

You need to remove the block.

Best Regards

I found it in /wp-content/themes/basel/css/bootstrap.min.css. Please take a look!

Hello,

You provide me CSS, however the block which appears and prevents 2 columns on mobile is added in HTML. https://prnt.sc/rn53o3 and https://prnt.sc/rn54al I need to enter and see how it is added.

Add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 767px){
body .visible-xs-block {
    display: none !important;
}
}

Best Regards

Now it seems to work perfectly. Are you really sure that is it not a Basel bug? It’s important to understand it. We checked every file inside child theme and we never found the class “visible-xs-block”.

Did you try to do the same on a test web site?

Hello,

I need access to check and then I will tell exactly. For now, I have provided a temporary solution to solve the problem.

Best Regards

Dear Elise,

the CSS code provided worked perfectly for us in the blog page. But we look only now that it causing some issue to this page, where the Product Grid block is also used (only from smartphone). What we can do? Maybe we need to change the max-width value?

Hello,

Sorry I have provided not correct CSS code. Please provide your site admin access.

Best Regards

Hello,

we can’t provide an access to the admin area, because the web site is live. Please could you provide us a CSS code just like before?

Thanks.

Hello,

We shall check and do not do anything. We usually check and suggest. If we deactivate the plugins we ask for a permit. In this case, we shall check. Please provide the access otherwise we cannot help.

Best Regards

Hello,

Please replace the code provided with this one:

.products.grid-columns-2 .visible-xs-block {
  display: none !important;
} 

Add this code to the Theme Settings > Custom CSS > Mobile

Best Regards

Now it works well. Thank you, Elise. Do you think that it will be fixed in the next update?

Hello,

Yes, it will be fixed.

Best Regards

[Author]

Posts