How to reduce icon spacing effectively?

How can I minimise the spacing between my icons?

Hello @TDS2023

Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

Hi @TDS2023 ,

Would you mind to share your URL website with password if its protected?

Thanks!

Hey @TDS2023
Kindly share your Store URL and Password if enabled

Thanks url is www.thedropskincare.com.au

Where do I look to see if it’s password protected?

Hey @TDS2023

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

Thank you. Yes it did. I changed it to 10px as I wanted it smaller. But now I have this unusual spacing. Are you able to help with this?

Hey @TDS2023

Can you please provide a screenshot for reference?

Hey @TDS2023

Set the margin to 0px and it should fix the problem then!

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

Thank you. It fixes one problem, but creates another. Any ideas? I need space between these sections which are further down on my home page

Minimizing padding around icons is an effective way to optimize the use of screen space and create a visually compact layout. Here are a few strategies you can consider to achieve this goal:

  1. Optimize icon size: Start by selecting icons that are appropriately sized for your layout. Using smaller icons will automatically reduce the amount of padding required around them. However, be careful not to make the icons too small, as they may become difficult to recognize or interact with.

  2. Grid-based layout: Utilize a grid-based layout system to align icons and other elements. By defining a consistent grid, you can minimize the amount of padding needed between icons and ensure they are evenly spaced. This approach can create a clean and organized appearance.

  3. Negative space: Be mindful of the negative space around icons. Negative space, also known as white space, refers to the empty area around elements. By strategically adjusting the negative space, you can reduce the amount of padding while maintaining a visually appealing balance.