Skip Navigation

[Resolved] Responsive Cards

This support ticket is created 5 years, 6 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
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 4 replies, has 2 voices.

Last updated by jimmyN 5 years, 6 months ago.

Assisted by: Nigel.

Author
Posts
#1299015

I am trying to: have the card responsive.

Link to a page where the issue can be seen:hidden link

I expected to see:hidden link

Instead, I got:hidden link

#1299143

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

I visited your link and it seems to me that the cards *are* responsive, inasmuch as when I resize the browser they take up the available width in 3 columns and below a certain width they stack on top of each other in a single column.

You are using Bootstrap columns for this in your View output.

Is there something different you mean by responsive?

#1299331

Hey buddy. When it is used with sidebars there are only supposed to be 2 cards. They show up 3 so the images and text are smushed together.

#1299639

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

When you create a View to display cards in this way you specify the number of columns, and it looks like in the View you linked to 3 columns were specified.

Because of how Bootstrap (which Toolset uses for its grid system) uses rows for its grid and how Views generates the markup, you must decide when creating the View how many columns to use, and if you need the same results elsewhere with a different number of columns then you'll need to create separate Views for each.

So edit the View and run the Loop Wizard to design the output and specify 2 columns. If you are using this View somewhere else where 3 columns are required then duplicate the View and edit the copy to change the number of columns.

#1301431

My issue is resolved now. Thank you!