[Resolved] Cannot get content template and view responsive

[Author]

Posts

[Alice]

Hi,
I have problem to get one of my pages to look good in smaller screens. The listning doesn't behave responsive no matter what I do and I really don't know what to do. I use Toolset and Oxygen Builder and the tutorials don't seem to solve my problem.

I have created 2 custom post types which are related 1-to-N. In this case I want to list all shops that are related to the a shoppingarea. But the shops are not listed in a responsive way.

If I create a grid in the view each shop will have a grid instead of getting all shops into one grid.

Can you help me?

[Shane]

Hi Alice,

Thank you for getting in touch.

I suspect the issue here is that Bootstrap isn't being loaded. However I will need to confirm this by looking at the site on the frontend.

Can you send me a link to the page in your screenshot so that I can have a look ?

Thanks,
Shane

[Alice]

Hi,
here is the adress to the site: hidden link

[Shane]

Hi Alice,

Thank you for the link.

From what I see you are using a table layout to do this grid. Tables are not responsive elements.

You will need to re-make this layout in views using a Grid style column layout in order for it to become responsive.

Thanks,
Shane

[Alice]

I tried that but then it repeats the grid layout (3-columns) for each custom post in the view. I have not added a table, just the name, image etc.

[Shane]

Hi Alice,

Can you allow me to have admin access to the site so that I can check this for you.

Based on what I see in the HTML for the page, it is using a table layout rather than the bootstrap grid layout.

I've enabled the private fields for your next response.

Thanks,
Shane

[Shane]

Hi Alice,

I can confirm that this view is actually made using a Table.

[wpv-items-found]
	<!-- wpv-loop-start -->
	<table width="100%" class="wpv-loop js-wpv-loop">
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<tr>
			<td>
				[wpv-post-body view_template="loop-item-in-lista-aktorer-pa-handelsomrade"]
			</td>
		[wpv-item index=other]
			<td>
				[wpv-post-body view_template="loop-item-in-lista-aktorer-pa-handelsomrade"]
			</td>
		[wpv-item index=3]
			<td>
				[wpv-post-body view_template="loop-item-in-lista-aktorer-pa-handelsomrade"]
			</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]

In order for this to be responsive, you will need remake this view using the loop editor and select Bootstrap, then setup your 3 column grid.

Thanks,
Shane