Skip Navigation

[Resolved] Need to reduce space in between custom search results

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 11 replies, has 2 voices.

Last updated by Waqar 12 months ago.

Assisted by: Waqar.

Author
Posts
#2582819
DDMS Search space issue2.PNG
DDMS Search space issue1.PNG

Hello,

I received some help building a custom form using a previous support ticket:

https://toolset.com/forums/topic/recreating-a-form-that-was-created-in-access/

Now I'm looking to get some of the space between entries reduced. I checked into the margin and padding options for each object, but I do not have them enabled. Is there a way to reduce the space in the areas of the attached pictures?

Let me know what I need to make this happen. Thanks in advance!

#2582859

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting us and I'd be happy to assist.

To suggest the best way to achieve this, I'll need to see how this custom search template is set up in the admin area.

Can you please share the temporary admin login details, along with the link to the page with this search?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

#2583365

So I'd rather not give out admin privileges if I don't have to. I linked the thread where the form was created. It's a many to many relationship between two post types, linked with a custom field. Custom search is using the relationship to pull information from. I have it showing in a grid with 3 separate Single Field values, a Title, hyperlink, and the relationship custom field. Should be 1 line of text for the most part, but it's got enough space for 3.

Is there anything else I can provide you barring giving out admin credentials?

#2583425

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks for writing back.

I understand if you'd prefer not to share the temporary admin access details.

Can you instead just share the link to the front-end page where this grid with the extra space can be seen? I'll try to look into the front-end page's markup and styles to suggest some changes.

#2583463

The page is at:

hidden link

However, you might not be able to see it because my site is in maintenance mode while it gets built. If you have a time that you would dedicate to view it, I can take it out of maintenance so that you can view what you need to view. Let me know what you think.

#2583471

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

My shift ends in 4 hours.

So you're welcome to temporarily deactivate the maintenance mode within this period and I'll be able to take a look.

#2583517

ok, I deactivated maintenance mode. Please let me know if you find anything.

#2583545

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I've checked the page's styles and noticed that the theme adds 30px top and bottom margins to the 'hr' or the separator tags. These margins are causing the extra vertical spacing between each search result item.

You can use some custom CSS code to override and reduce these margins:


.wpv-view-output hr {
    margin-top: 5px;
    margin-bottom: 10px;
}

Feel free to adjust the values in this code as needed and you can include this CSS code to work across the website, by adding it at WP Admin -> Appearance -> Customize -> Additional CSS.

#2583809
mobileafter.PNG
mobilebefore.PNG

So using 0px for top and bottom definitely seemed to make it look better for desktop. It collapsed the mobile view some, but I'd still like a little less space between objects. I attached before and after pics. seems like there's a little more space I could recover. Any ideas?

#2583921

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks for the update.

You can make use of CSS media queries to target smaller screen sizes, independently:
hidden link

For example, this additional CSS code, will apply different top and bottom margin values, when the screen width becomes smaller than 599px:


@media screen and (max-width: 599px) {
.wpv-view-output hr {
    margin-top: 5px;
    margin-bottom: 10px;
}
}

#2584099

well, even with 0px top and bottom, it didn't change the output. Might be the best I can do with the theme I have.

#2585689

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Without seeing the page it would be difficult to comment.

However, please make sure that you've added this new CSS code snippet below the previous one and you can even use the negative margin values (e.g. -5px, -10px etc ), to further reduce the space.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.