There is no margin between product items when the Product List is filtered

When utilizing the sorting features in this app, the formatting get's weird. See below spacing between results on the right column. Seems to happen for any of the filters we have in place. We are rolling this out to a national team and it looks unprofessional. Please let me know if/how long this fix might take to implement. Thanks.

Hi Lisa,

Thanks for reaching out to Jotform Support. Please inject the provided CSS code below into your form.

/*Adjust margin for each product item - 14272283*/

.form-product-item {

    margin: 4px !important;

}

/*Code ends here*/

Here's how to do it:

1. In Form Builder, on the right side of the screen, click on the Paint Roller icon.

2. On the right panel, go to Styles.

3. Scroll down to Inject Custom CSS.

4. Paste the provided CSS code.

Result:

Give it a try and let us know how it goes.

That did it!! Best customer service I've received in a long time. THANK YOU!!

1. Review the Styling: Check the CSS styles applied to the product list when filtered to ensure that there is proper spacing or margin defined between items.
2. Adjust Margins: Add or adjust margin properties in the CSS for the product list items, such as margin-bottom or margin-right, to introduce space between them.
3. Check for Overrides: Verify if there are any styles elsewhere in the code that might be overriding the desired margin settings.
4. Utilize Flexbox/Grid: Consider using modern layout techniques like Flexbox or CSS Grid to better control the spacing and positioning of the product items.
5. Test Across Devices: Test the changes across different devices and screen sizes to ensure consistent and appropriate spacing.
6. Responsive Design: Make sure the spacing remains consistent across different viewports for a good user experience.
7. Use Classes: Assign classes to product items like gig and style them accordingly, providing greater control over the layout.
8. Check HTML Structure: Ensure the HTML structure is conducive to proper styling, such as wrapping product items in a container element.
9. Consider Visual Hierarchy: Maintain a clear visual hierarchy in the layout to improve user experience.
10. Optimize Load Times: While making styling changes, also consider the impact on page load times and performance.
11. Cross-Browser Testing: Verify that the adjustments work as intended across different browsers.
12. Implement and Test Changes: After making changes, thoroughly test the page to ensure that the margin issue has been resolved and there are no unintended side effects.