[Resuelto] Styling the Filtered Results in Results List (using map)

[Autor]

Mensajes

[Kenneth Horn]

Tell us what you are trying to do? Styling the results list created by filter (with map)

Pretty basic question. I've put a custom search on page with map producing the list and map. Not using bootstrap. Just standard output. There is enormous amount of space between between each list item. I've attempted to modify it by placing some CSS (using various combinations of line-height, padding and margin) with "ul li" in the CSS Editor for output loop. But nothing seems to affect the space BETWEEN list items.

I am able to adjust the line-height to take care of excessive space when the line wraps to a second line. But nothing I do seems to affect the space between list items.

Please provide guidance. Thanks, in advance. Image attached.

[Christian Cox]

Hi, I need to be able to inspect this in a browser to be able to provide the best CSS override here. It can be affected by your theme or other custom styles you have applied, so I will need to use the browser tools to investigate. Please share a URL where I can see the results you are describing, and I will take a look.

[Kenneth Horn]

I elected to not use the list. But before doing so I found a solution by using a div with a style= in the loop rather than using the CSS Editor section. Here is the code:
<ul class="wpv-loop js-wpv-loop">

<div style="color:white; margin: -10px 0px -10px 0px; padding: 1px;">
<b>[wpv-post-title]</b>
<b> - Hours:</b> [types field='cfh-1' output='raw'][/types] [types field='cfh-2' output='raw'][/types] [types field='cfh-3' output='raw'][/types]
<b> - Rating:</b> [wpv-post-taxonomy type="establishment-rating" format="name"]
</div>

In conjunction with this I put CSS "line-height" to a set value of 156 px to produce the spacing I wanted when the text in the list item wrapped to due to long length.
Like this >>> ul li { line-height: 16px; }
The formatted results is shown in attachment.
Thanks.