Skip Navigation

[Resolved] how to make a view display 6 columns in desktop and 2 columns in mobile

This support ticket is created 4 years, 8 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 9 replies, has 2 voices.

Last updated by davelow 4 years, 8 months ago.

Assisted by: Shane.

Author
Posts
#1599011

Tell us what you are trying to do?
make a view display 6 columns in desktop and 2 columns in mobile
the view currently display 6 columns in the desktop, but in mobile viewport it displays only 1. how do i make it display 2 columns in the mobile viewport?
Is there any documentation that you are following?
no
Is there a similar example that we can see?

What is the link to your site?
hidden link

#1599655

Shane
Supporter

Languages: English (English )

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

Hi Dave,

Thank you for getting in touch.

Could you let me know if you are using the Gutenburg Block interface to design the columns?

Furthermore could you send a screenshot of your setup on the backend ?

I need to know this in order to best advise you on the Approach because this is possible for our Toolset Blocks plugin.

Please let me know.

Thanks,
Shane

#1600353
Screenshot 2020-04-25 at 16.42.42.png

Hi Shane,

I am using the toolset loop wizard for the view.
Using bootstrap grid to display the loop (6 columns)

screenshot uploaded.

much thanks,
Dave

#1601157

Shane
Supporter

Languages: English (English )

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

Hi Dave,

Thank you for the screenshot. Given that you are using the classic editor for Views we will need to adjust the bootstrap classes for the mobile devices.

When we are working with mobile devices we would use the "col-xs-" to let bootstrap know the column size we want on our mobile page.

For your case you can add "col-xs-6" to your div class and then test on the frontend to see if the columns adjust to 2 columns on mobile devices.

You will need to add this col-xs-6 to each of the divs inside the row class div. For more documentation on this Grid setup for bootstrap I would highly recommend having a look at the bootstrap documentation guide.
hidden link

Finally there is a much easier way to do this with our Toolset Blocks plugin as there is a user interface for this where you can select the column size you want for mobile and for desktops as well as tablets.

If you're not too far along on your project I would highly recommend our Blocks plugin as you are able to achieve your goal purely through the User interface with no CSS or HTML required.

Here is a small demonstration video on how you can achieve this with Blocks.
hidden link

Please let me know if this was able to help you.

Thanks,
Shane

#1602039
Screenshot 2020-04-27 at 10.33.34.png

Hi Shane,

thank you for the reply.
Yes, i don't think I'm too far into the project and I can transit to an all blocks environment.
A couple of questions

1) For the existing views, how can I specify them to use the block editor?
2) When I create a new view, how do I specify to use the block editor?

Is it only via the 'Add View block'?

thanks,
Dave

#1602877

Shane
Supporter

Languages: English (English )

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

View Content Template.PNG

Hi Dave,

1) For the existing views, how can I specify them to use the block editor?

For your existing views you are only able to use the Block editor to design the content template of that view. See Screenshot
In the right hand top corner you will see the Block Editor button. Clicking this will allow you to use the Block editor to design your view output content template.

2) When I create a new view, how do I specify to use the block editor?

Based your screenshots you are using Views with the Classic editor enabled.

To enable the Block interface that will allow you to build your views in Blocks you will need to go to Toolset -> Settings and scroll to Editing Experience and enable the 3rd option.

Once you've done this you can go to any of your Posts or Pages and as long as it is using the Gutenburg editor you can Add a new View block.

From there you can build out your View completely visually like you see in my video demonstration. However it is a Requirement that your Pages are using the Gutenburg editor.

Please let me know if this helps.
Thanks,
Shane

#1603429
Screenshot 2020-04-28 at 12.03.21.png
Screenshot 2020-04-28 at 11.46.54.png
Screenshot 2020-04-28 at 09.56.06.png
Screenshot 2020-04-28 at 09.54.04.png

Hi Shane,

Thank you for the suggested solutions.
I've picked up 2 further questions.

1) Toolset Settings. When I tried to access toolset settings i ran into an error, very likely the same one as described in https://toolset.com/errata/fatal-error-on-the-toolset-dashboard-page-when-using-3rd-party-plugins-that-use-wordpress-rest-api/ . I have downloaded and replaced the the patch file accordingly but the error still persists. Does the patch still work?

update: I deactivated Google Site Kit and was able to access toolset settings. My editing experience was option 3 like you mentioned.

2) Please disregard images 1 and 2. I could not find a way to specify image dimensions (see image 3).

update: I could specify the image dimensions, but only if i do not set a query filter for the view. setting a filter for view will get the error message (see 3, with image)

3) and I got an error (see image 4)

Thanks for your time,
Dave

#1604295

Shane
Supporter

Languages: English (English )

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

Hi Dave,

1) Toolset Settings. When I tried to access toolset settings i ran into an error, very likely the same one as described in https://toolset.com/errata/fatal-error-on-the-toolset-dashboard-page-when-using-3rd-party-plugins-that-use-wordpress-rest-api/ . I have downloaded and replaced the the patch file accordingly but the error still persists. Does the patch still work?

Yes this patch still works. You will need to patch 3 plugins Views, Blocks and our Forms plugin.
Blocks folder = /wp-content/plugins/toolset-blocks
Forms folder = /wp-content/plugins/cred-frontend-editor
Views folder = /wp-content/plugins/wp-views

These are the root directories for each of the plugins that you will need to follow the instructions to replace the file in.

2) Please disregard images 1 and 2. I could not find a way to specify image dimensions (see image 3).
update: I could specify the image dimensions, but only if i do not set a query filter for the view. setting a filter for view will get the error message (see 3, with image)
3) and I got an error (see image 4)

Essentially these errors do not occur on my end.

Would it be possible to gain admin access to the site to check on the page where you are creating this block view to see if I can replicate the problem?

The private fields will be enabled for your next response.

Thanks,
Shane

#1607283

Shane
Supporter

Languages: English (English )

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

Hi Dave,

I Took a look at this one for you. When I add the filter The view block shows fine.

I'm not getting the error you are getting from your screenshot.

Even when I removed the filter from your original view and re-add it everything displays fine on the backend. No errors are being generated.

Thanks,
Shane

#1607729

My issue is resolved now. Thank you!