How can I achieve, that the grid is only for tablet and desktop and for mobile the results will show beneath each other? So 3 columns for tablet and desktop but 1 column for mobile?
Hello,
You can follow our document to setup grid layout:
https://toolset.com/course-lesson/responsive-columns-and-grids/
If we are talking about Toolset WordPress Archive, please check section "Changing the grid options for a WordPress Archive" of above document
Hello Luo,
I think this got missunderstood because the comment does not tell the whole problem.
I already created a search with filters by using the legacy view builder and integrating the view via shortcode into my divi layout.
I also achieved the grid layout as you can see in this screenshot: hidden link
But when changing to mobile it remains in 3 columns and the third column runs ot of the view:
hidden link
Therefore I would like to change it to 1 column
You can follow the document I mentioned above: weak the "Grid Settings" options for your view’s grid output.
For example, find and select your view block, in section "Grid Settings", choose "Phone", and set the column number to 1
See screenshot grid.JPG
I tried it by using the grid block and even on desktop it looked terrible then... The columns were way to thin.
I am fine with the current look, just can you maybe help me with an css snippet to make the grid into 1 column for max-width: 500px? And that all columns have the equal width on more than 500px?
hidden link
You are still using Table grid layout, it won't be displayed Responsive by default, you can try other custom CSS solutions, for example:
hidden link
But such kind of custom CSS codes is out of our support range.
As I mentioned above, if you are using Blocks editor, you just need to switch to "Grid" layout, see my screenshot grid.JPG, if you need more assistance for it, please provide you website credentials in below private message box, I can setup a demo for you.
I set it up like this now and it still does not look as inteneded
hidden link
No margins, wrong font-sizes, etc
hidden link
Those are CSS issues, please provide a test site with the same problem, I can setup a demo for you, private message box enabled again.
Thanks for the details, I can login your website and see the problem:
1) The problem URL:
hidden link
It is archive page of post type "ausflugtipp", but you are using Divi builder to display a normal post view "Ausflugtipps-Suche".
2) Toolset Blocks plugin is based on WordPress Blocks editor(Gutenberg), both Divi editor and Blocks editor are page builders, It is not recommended to use both page builders to design the same page, it will conduct unexpected results, see our document:
https://toolset.com/2020/01/how-to-build-advanced-sites-with-toolset-and-divi/
You should not mix Divi and Toolset elements on the same page, to avoid compatibility issues and make sure that what you build now will keep working in the future.
3) If you are going to design above archive page with Toolset Blocks plugin, please try these:
1. Disable Divi editor in that archive page, so it can display normal WordPress post loops, if you need assistance for it, please check it with Divi support.
2. follow our document to setup a Toolset WordPress Archive for post type "ausflugtipp":
https://toolset.com/course-lesson/creating-a-custom-archive-page/
Well thanks for your try, but I found a solution myself and added some lines of CSS and it works now properly as intended on all devices. Wasnt even that hard and I am not even a full developer...
