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 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | - |
| - | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | - |
Supporter timezone: Asia/Karachi (GMT+05:00)
This topic contains 6 replies, has 2 voices.
Last updated by 5 years, 4 months ago.
Assisted by: Waqar.
Hi there,
I have a search using a list of bullets, this in 1 column and works great.
However for iPad would like this to be in 3 columns and mobile phone back to 1 column. Is this possible?
For the past hour I have tried many variations using info from the Bootstrap Grid info however everything I try breaks.
This is the page: hidden link
On mobile view an accordion appears at the top of the grid.
The code below is what I have the in the sidebar for PC, wondering if this can be modified rather than creating new?
<div class="form-group">
<label class="main-label">[wpml-string context="wpv-views"]Pets[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="pet" type="radios" url_param="wpv-pet" output="legacy" class="special-radio-class" label_class="special-label-class"]
</div>
<div style = "height:15px;"></div>
<div class="form-group">
<label class="main-label">[wpml-string context="wpv-views"]Area[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="area" type="radios" url_param="wpv-area" output="legacy" class="special-radio-class" label_class="special-label-class"]
</div>
<div style = "height:15px;"></div>
<div class="form-group">
<label class="main-label">[wpml-string context="wpv-views"]Guests[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="guests" type="radios" url_param="wpv-guests" output="legacy" class="special-radio-class" label_class="special-label-class"]
</div>
<div style = "height:15px;"></div>
<div class="form-group">
<label class="main-label">[wpml-string context="wpv-views"]Collections[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="collection" type="radios" url_param="wpv-collection" output="legacy" class="special-radio-class" label_class="special-label-class"]
</div>
[wpv-filter-reset output="bootstrap"]
Hi there Waqar,
Goodness, how you make sense of Bootstrap and to achieve the result you have is a mystery to me 🙂
Media quires using CSS is so easy in comparison 🙂
Ok your code works well in the first instance...thank you. See pic attached.
It's a shame on a screen 1024 x 768 (tablet landscape) it's back to a single column rather than maintaining 3 columns.
Can I ask, what would be the code to make it 3 columns on large and medium screens (laptops & desktops) and smaller screens (tablets) ...and a single column on extra small screens (mobiles)?
I may use this elsewhere and would like to keep both variations of this on file so I don;t have to bother you again, possibly later today 🙂
The result is better than I hoped so intend to use elsewhere.
Thanks again. P
Hi Waqar,
I have had a look at Bootstrap media queries and it's not easy to understand. One day, after I have a better understanding of Toolset, I may spend some time trying out different things with Bootstrap. At the moment I have too many other things to think about.
Ok I have changed...
<div class="col-md-12 col-sm-4 col-xs-12">
to
<div class="col-sm-4 col-xs-12">
Now in the filter accordion (this will be hidden on desktop and only for mobile view) It looks and works much better.
However the sidebar is now using the same 3 column layout. Is there a way of assigning the new column code just to the accordion dropdown?
hidden link
Thank you. P
