Adaptation of Information boxes to mobile

Hi,
On my website, I have 2 rows of 3 info boxes.
On mobile, I want them to become 3 rows of 2.
Tried many options via wpbakery, during 2 hours 🙁
Either it’s OKL on desktop but not on mobile. Either the opposite. or it becomes 2/1/2/1; or 2×2 +1 +1 ….
Despaired now. How to make that simple thing?

Hello,

You need to create one row and 6 columns 4/12 http://prntscr.com/llo79d then you set column responsiveness http://prntscr.com/llo7nz

You can just copy and insert this code:

[vc_row][vc_column width="1/2" offset="vc_col-lg-4 vc_col-md-4" mobile_bg_img_hidden="no" woodmart_parallax="0" woodmart_sticky_column="false" parallax_scroll="no" mobile_reset_margin="no" tablet_reset_margin="no"][/vc_column][vc_column width="1/2" offset="vc_col-lg-4 vc_col-md-4" mobile_bg_img_hidden="no" woodmart_parallax="0" woodmart_sticky_column="false" parallax_scroll="no" mobile_reset_margin="no" tablet_reset_margin="no"][/vc_column][vc_column width="1/2" offset="vc_col-lg-4 vc_col-md-4" mobile_bg_img_hidden="no" woodmart_parallax="0" woodmart_sticky_column="false" parallax_scroll="no" mobile_reset_margin="no" tablet_reset_margin="no"][/vc_column][vc_column width="1/2" offset="vc_col-lg-4 vc_col-md-4" mobile_bg_img_hidden="no" woodmart_parallax="0" woodmart_sticky_column="false" parallax_scroll="no" mobile_reset_margin="no" tablet_reset_margin="no"][/vc_column][vc_column width="1/2" offset="vc_col-lg-4 vc_col-md-4" mobile_bg_img_hidden="no" woodmart_parallax="0" woodmart_sticky_column="false" parallax_scroll="no" mobile_reset_margin="no" tablet_reset_margin="no"][/vc_column][vc_column width="1/2" offset="vc_col-lg-4 vc_col-md-4" mobile_bg_img_hidden="no" woodmart_parallax="0" woodmart_sticky_column="false" parallax_scroll="no" mobile_reset_margin="no" tablet_reset_margin="no"][/vc_column][/vc_row]

Best Regards

I did it first with admin editor. Did not work.

Then, copy / paste your code, after having replaced woodmart by basel. Added my boxes.
On PC, I have my 2 rows of 3, as wished.
On mobile, I have 1 column and 6 rows 🙁 … when wished is 3 rows of 2.

Look, it’s in the bottom of the page. I don’t see the mistake if any, sorry.

Just to be sure: my target is 2 rows of 3 info box on PC ; and 3 rows of 2 boxes on mobile

Kind regards

Attachments:

You must be logged in to view attached files.

Hello,

1. Create an empty page, switch to the “Classic” > text http://prntscr.com/llrxs9

2. Insert the code I have provided.

3. Save Template http://prntscr.com/kxsggv

4. Add the template http://prntscr.com/kxsgr8

4. Find the template in the library http://prntscr.com/kxsh8c

5. Hover the template and insert to the page you need http://prntscr.com/kxshkc

6. Drag and drop to the place you need and drug and drop Information boxes into the template.

Best Regards

Hello,
I made it but it did not work.
So, retried on clean sheet. Same result.
Wondered if linked with image size. So, reduced image size from 70 to 50. Same result.
So, tried without image. Same result.
🙁
What is wrong?

Info bleow

Hello,

Please follow the provided instructions step by step and show me the page where you have inserted the template.

Best Regards

I already provided the info, tell, again below, tell me please what is missing

Hello,

What page do you need code to insert in?

You provide the link of posts list http://prntscr.com/lmhl0f

Please provide front-end link I will insert the template and show how to insert information block.

Best Regards

Hello,
Sorry, here is the link to the page, I did not know that the post number were changing with revisions
https://polinacouture.com/accessoires-elegants-4/

the name of the wpbakery model is colonnes info box.

VERY IMPORTANT: Probably can I find another solution (present info differently). IF YOU HAVE TO PRIORITZE YOUR TIME & RESOURCES, MY HUGE PRIORITY IS TO GET THIS CATEGORY GALLERY, WITH NICE CAPTION BELOW IMAGES AND LINK TO SHOP CATEGORY, without special effect, no other text, cacheable, quick to load on mobile

Best regards

Hello,

I have inserted the template you can drag and drop anywhere https://gyazo.com/62b499d5a3f171000f4e57f94b48b1aa

You can drag infoboxes into the columns https://gyazo.com/3459a22cb0bfb26ba51a131bb573621e

Best Regards

Hello,
I just tried again, supposing that I missed something …. Sorry, it does not work. On mobile, this 2 rows x 3 blocks becomes 6 rows of 1 block.
What is in line with what I did with your former explanation.
I don’t mind that you try on my website … I have a backup. If it leads to failure, I won’t blame you, really.

ps: In my pages, the trial I made is, as shared on accessoires elegants 4.
Accessoires elegants 5 (five) is the copy of “accessoires elegants 4” before I did my changes (made via plugin Duplicate Post)

Sorry, again, kind regards

Hello,

As I told above you need to set the responsiveness. https://prnt.sc/llo7nz If you set 6 columns on mobile you will have 2 items in the row, if you set 4 columns you will have 2 columns on the row.

You can delete the row and test on a testing page instead of doing on a live page.

Best Regards

It’s made, it does not work.
If you think that I made it wrong or am unable to drag and drop as you said, check and tell where is the mistake.
And let’s talk again

Attachments:

You must be logged in to view attached files.

Hello,

You need to set 6 columns on the mobile https://gyazo.com/e96b25873c914d19b3009e44ccfde693

Best Regards

Hi,

You wrote above;
“I have inserted the template you can drag and drop anywhere
You can drag infoboxes into the columns”
Apparently, you did not finish.

Though, I finished, and after plenty of tests, I understood that there are 2 issues. One of the 2 is that you info box, depending on text, can be too big for the … final “container” on mobile. All the more they are not responsive (size of images & font are equal, whatever the support). That’s why, even if the parameters are as you wrote, with the theme font, it does not work, and you have 1 container per row on mobile.

The logical coherent way would be to use, especifically for the info boxes, a thiner variant of the font (eg medium palanquin, or thin palanquin) …. but as they are not in wpbakery.

Hello,

1. Now I see two items in the row on the mobile view.

2. Naturally, an information box is responsive in the height. If you want to fix the height, add a class set min-height basing on the biggest one.

Best Regards

Issue on mobile is width, not height, for me, but, since dummy, I can be wrong
And you think that I know how to add a class?
This discussion is 2 weeks old, among different posts.
It’s a pity.

Hello,

Please provide the screenshot showing the problem with the width.

Here are the tutorial and documentation on WP Bakery page builder, you will find how to configure the element and insert the class:

https://wpbakery.com/video-tutorials/

https://kb.wpbakery.com/?_ga=2.165343871.1157034650.1543403182-529284048.1540533517

Please do not mix several topics in one. It would allow solving problems one by one.

Best Regards

I found a solution.
There are 2 problems:
1. You have to force the font to be smaller / narrower, than what is defined by default in the theme. Otherwise, it’s too wide, and it leads to 1 info box per row.

2. wpbakery gives a priority to row. So, if you make 2 rows of 3 equal elements, it leads to 2 + 1 + 2 +1. Even if you put the 2 rows in a container. So, you have to create 1 container, with 1 row, and continue to add the blocks, as if you were continuing the first row.
That way, it works, but it’s unstable.
After, in terms of setting for responsiveness, you have to make it mobile first …. This means that the parameter for the columns have to be:
width = 1/2 (and not 1/3)
width for PC = 1/3
width for laptop = 1/3
width for mobile = 1/2

Hope it’s clear, but clearly complicated to explain.
I think that the core issue is that the info box is a bit too wide. Too little room for manoeuvre to get 2 stable boxes on 1 row on mobile

Best regards

Hello,

1. Please provide page URL and screen with the text you want to make smaller.

2. We are glad you have found the optimal template configuration

Best Regards

[Author]

Posts