[Résolu] Mobile Views Problem after theme update

[Auteur]

Publications

[erinS-2]

I am trying to: Use Bootstrap to display my View horizontally

I visited this URL: hidden link

I expected to see: The Latest From The Blog section displayed horizontally (see Home 2 screenshot)

Instead, I got: The posts are displaying vertically (See Screen Shot 2015-05-11)

I have re-followed the instructions in my last support ticket to make this work, and I believe the problem is with the functions.php file - here's a Pastebin of my code: http://pastebin.com/1LCJz4wZ

[Beda]

Thank you for contacting us here in the Support Forum
and for providing the Debug Informations

It would be good that you first update your Views Plugin to it's latest versions. Can you do this please?

?? Be sure to backup your database first before you proceed! ??
⌥ You can use a plugin for this if you like.
I often use the Duplicator plugin for this purpose.
See: http://wordpress.org/plugins/duplicator/

In case the issue persists afterwards, please could you let me know:

1. How the View has been set up (Screenshot of the View is OK)
2. How the View is inserted to your Site (Screenshot OK too)
3. Which Grid did you use to generate the Loop Output

I can then investigate this and help you to solve the issue.

Please could you provide me the additional Infos?

Thank you

[erinS-2]

OK, the plugin has been updated.

1. How the View has been set up (Screenshot of the View is OK)
http://pastebin.com/MQaHEazf

2. How the View is inserted to your Site (Screenshot OK too)
See screenshot

3. Which Grid did you use to generate the Loop Output
Bootstrap

[Beda]

Thank you for the details

If I understand int correctly you want the Posts (Title, Image and "Read More") in a 3 Column Table, means, 3 Posts beneath each other, and then breaking to a new row, etc.

Please see the screenshot.

If that's what you need, you should use something along this lines in your View:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<table width="100%">
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<tr>
			<td>
				[wpv-post-body view_template="Loop item in peoples birhtday"]
			</td>
		[wpv-item index=other]
			<td>
				[wpv-post-body view_template="Loop item in peoples birhtday"]
			</td>
		[wpv-item index=3]
			<td>
				[wpv-post-body view_template="Loop item in peoples birhtday"]
			</td>
		</tr>
		[wpv-item index=pad]
			<td></td>
		[wpv-item index=pad-last]
			<td></td>
		</tr>
	</wpv-loop>
	</table>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		[wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
	[/wpv-no-items-found]
[wpv-layout-end]

You can create that with the Wizard > Table Based Grid, 3 columns.
As you see I used a content template to create the content, and in that content template there is:

<img class="thumb" src="[wpv-post-field name="wprss_item_thumbnail"]" /><h3>[wpv-post-link]</h3>[wpv-post-excerpt length="100"]<p><a href="[wpv-post-url]">Read more...</a></p>

Please let me know if that is what you want to achieve.

Thank you.

[erinS-2]

No, I would like them in a row like the attached screenshot.

[Beda]

Thanks for the Details

Looking at your site in the Firefox Console it seems you don't use Bootstrap CSS

style.css is used on that site.

You need to use a Theme with Bootstrap Style, or include it in your Theme properly, to use Bootstrap Grids in Views.

You can include the needed files (which have to be present in your Theme Folder) similar to this:

/* Add bootstrap support to the WordPress theme*/
function theme_add_bootstrap() {
	wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
	wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
	wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );

hidden link
http://wordpress.stackexchange.com/questions/163209/how-to-install-bootstrap-to-twentyfourteen-theme
hidden link

This will load Bootstrap Style Sheet

Please don't hesitate to inform me in case the issue persists
and let me know if the above solution works for you, I look forward to your reply!

Thank you

[erinS-2]

That was what I needed - apparently whatever I was doing to load bootstrap wasn't right. Thanks!