This thread is resolved. Here is a description of the problem and solution.
Problem: I have a View of taxonomy terms that displays each term as a link in a grid of results. Google recommends increasing the space between each item so that it is more easily clickable on mobile devices. How can I increase the gap between rows in the View results?
Solution: Use CSS padding applied to a wrapper element around the taxonomy shortcode in the loop to increase the gap between rows.
<div class="tssupp-padding-top-bottom-8px"> Example content: [wpv-taxonomy-link] </div>
In the CSS panel:
.tssupp-padding-top-bottom-8px {
padding-top:8px;
padding-bottom:8px;
}
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.
Our next available supporter will start replying to tickets in about 5.30 hours from now. Thank you for your understanding.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 4 replies, has 2 voices.
Last updated by 3 years, 8 months ago.
Assisted by: Christian Cox.
If you want to increase the height of each element, you can wrap the taxonomy term contents in a div with some CSS that adds top and bottom padding. For example, in the loop:
<div class="tssupp-padding-top-bottom-8px"> Example content: [wpv-post-taxonomy type="location"] </div>
In the CSS panel:
.tssupp-padding-top-bottom-8px {
padding-top:8px;
padding-bottom:8px;
}
That produces a gap like you can see in the screenshot here. You can adjust the 8px values as needed to create whatever gap you feel is necessary for legibility.
