[Resolved] Visual composer with responsive columns

[Author]

Posts

[Louis-Philippe]

*** Tell us what you are trying to do?
I created a layout with Visual Composer for a view where I list my team members with their respective fields. I have a 4 columns in a row layout that needs to be down to 3 for tablet and 2 in cell phone. I managed that easily with visual composer.

When turning to the view, I don't get how to implement it for the design to respect my column needs such as what I created with VC... How the

<wpv-loop wrap="4" pad="true">

work in this case without bootstrap? It is needed?

Is there a similar example that we can see?
I built a sample of the needed result at the top of this page : hidden link

Thank you for your help!

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

Yes - the layout you try to use is called bootstrap grid and for that you need to load bootstrap and its needed to build such output.

Please check with the following Doc that will help you to better understand how bootstrap grid works:
=> https://toolset.com/documentation/user-guides/view-layouts-101/#bootstrap

[Louis-Philippe]

Well, you got that wrong my friend.
I don't want to use bootstrap and layout but VISUAL COMPOSER.
So the question remains the same, how to implement a column base responsive grid in the view with Visual composer.
Thank you .

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Doh!! I really didn't understood your query. My bad.

Well - view supports following output formats:
=> https://toolset.com/documentation/user-guides/view-layouts-101/#the-output-formats

You have two options,

1) use Bootstrap
Views supports bootstrap, and if your theme or plugin do not support bootstrap then you can go to:
=> Toolset => Settings => General tab => Bootstrap loading and set option "Toolset should load Bootstrap 3.0"

2) write your own media queries:
=> hidden link
=> hidden link

However I found following link and I see you can set responsive settings for your columns from visual composer, if this helps:
=> hidden link

[Louis-Philippe]

Thank you Minesh,
because my site already use a template with their grid system, I don't want to use bootstrap.

I can easily made the column responsive with VC too.
The problem is the integration within the VIEW!

HERE IS MY MAIN VIEW DISPLAYING ALL TEAM MEMBER ( animateur )

[wpv-layout-start]
	[wpv-items-found]                          

[vc_row row_height_percent="0" overlay_alpha="50" equal_height="yes" gutter_size="3" column_width_percent="100" shift_y="0" z_index="0"]

	<!-- wpv-loop-start -->
	<wpv-loop wrap="4" pad="true">
				[wpv-post-body view_template="detail-animateur"]	
	</wpv-loop>
	<!-- wpv-loop-end -->

[/vc_row]

	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]Aucun animateur n'est en service présentement.[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Within the template view = detail-animateur

[vc_column column_width_percent="100" align_horizontal="align_center" overlay_alpha="50" gutter_size="3" border_color="color-675465" border_style="solid" medium_width="3" mobile_width="4" shift_x="0" shift_y="0" shift_y_down="0" z_index="0" width="1/4" el_class="animateur-column"]

[vc_single_image media="[wpv-post-featured-image output='id']
" media_width_use_pixel="yes" media_ratio="one-one" alignment="center" shape="img-circle" advanced="yes" media_overlay_opacity="50" media_padding="2" no_double_tap="yes" media_width_pixel="150"][vc_custom_heading heading_semantic="h4" text_size="h4" text_font="font-377884" sub_lead="yes" subheading="{!{types field='role' separator='<br> '}!}{!{/types}!}"]{!{wpv-post-title}!}[/vc_custom_heading][/vc_column]

On Chrome ans Safari, perfect! On Firefox, all bugged ( hidden link )
I can't figure this one out.

Is that because of where I place the row ?
I think at that maybe I need to repeat a row for every 4 columns, but how ?

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

You need to use shortcode [wpv-item] .
=> https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-item

Following Doc certainly help you:
=> https://toolset.com/documentation/user-guides/digging-into-view-outputs/#vmeta-wpv-loop-parameters
See the example given with the above link, its with 4 column output.

[Louis-Philippe]

Thank you, I am close to an final result.
I use LOOP so the row close on every fourth item,
but for tablet view, I would love to have a pad of 3 instead, and 2 for mobile.

Is there any way we can acheive this trough the view layout.

If desktop :

<wpv-loop wrap="4" pad="true">

If tablet :

<wpv-loop wrap="3" pad="true">

If mobile :

<wpv-loop wrap="2" pad="true">

If not, what else can you suggest for the same effect ?
Thank you again for all your help!

hidden link

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Well - I think you should build a custom shortcode or function that should return boolean value true/false based on detection of mobile/tablet/deskstop and use it with [wpv-conditional] shortcode.

For example - custom shortcode example:

[wpv-conditional if="( '[is_mobile]' eq '1' )"]
<wpv-loop wrap="2" pad="true">
[/wpv-conditional]

[wpv-conditional if="( '[is_tablet]' eq '1' )"]
<wpv-loop wrap="3" pad="true">
[/wpv-conditional]

[wpv-conditional if="( '[is_desktop]' eq '1' )"]
<wpv-loop wrap="4" pad="true">
[/wpv-conditional]

More info:
- use shortcode with [wpv-conditional]:
=> https://toolset.com/documentation/user-guides/conditional-html-output-in-views/using-shortcodes-in-conditions/#checking-custom-shortcodes

- use function with [wpv-conditional]:
=> https://toolset.com/documentation/user-guides/conditional-html-output-in-views/using-custom-functions-in-conditions/#custom-functions

This scrip may also help you to build custom shortcode or function to detect device:
=> hidden link