Pages that have the 3 column display are not being responsive

This support ticket is created 3 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	-
-	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	14:00 – 18:00	13:00 – 18:00	-

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 6 replies, has 2 voices.

Last updated by melissaC-8 3 years, 10 months ago.

Assisted by: Shane.

Author

Posts

March 15, 2022 at 4:46 pm #2317635

melissaC-8

Screen Shot 2022-03-15 at 11.45.15 AM.png

Screen Shot 2022-03-15 at 11.44.53 AM.png

Tell us what you are trying to do? Want the columns to be responsive, maybe change to 1 column on mobile.

Is there any documentation that you are following? The one setting that is called out on responsive is enabled.

What is the link to your site? hidden link or this one hidden link

March 15, 2022 at 8:40 pm #2317777

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Melissa,

Thank you for getting in touch.

Based on what I see on your site you are using a Table based grid instead of the bootstrap based grid. Unfortunately HTML tables are not responsive.

In order for you to have your columns responsive you will need to remake the layout of the view to use a Bootstrap grid if you're using classic view or just select the grid layout if you're creating the view using Blocks.

Thanks,
Shane

March 15, 2022 at 9:03 pm #2317785

melissaC-8

What is the easiest way to fix this?

What do I need to do to use the bootstrap based grid? We are creating the page using a Divi Theme that contains a visual builder.

March 15, 2022 at 9:08 pm #2317789

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Melissa,

The easiest way to fix this is to essentially rebuild the loop output section of your view.

Are you using the classic editor to create your view ? Meaning your view is created by going to Toolset -> Views -> Add New?

Please let me know.
Thanks,
Shane

March 15, 2022 at 9:11 pm #2317801

melissaC-8

Screen Shot 2022-03-15 at 4.10.58 PM.png

Screen Shot 2022-03-15 at 4.10.06 PM.png

Yes, using classic editor

March 15, 2022 at 9:22 pm #2317823

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Melissa,

In this case you're going to need to use the Loop Wizard and recreate the loop output layout by selecting the Bootstrap grid.

From there you're able to specify the number of columns you want to use. Either way the columns will be responsive when viewed on smaller devices.

Thanks,
Shane

March 18, 2022 at 1:00 pm #2320623

melissaC-8

My issue is resolved now. Thank you!