Text Columns with Icons in Impulse Theme

Solved

Text Columns with Icons in Impulse Theme

JulieMaida
Tourist
4 0 2

Hi! I am trying to figure out if I can just add custom CSS to fix this issue. The gap between columns is quite large on the "Text Columns with Icons" section in the Impulse Theme (on mobile especially). I have three columns. The gap between each column is much too large. How to I reduce it in this section with CSS? Thanks!

Accepted Solution (1)
suyash1
Shopify Partner
10498 1293 1657

This is an accepted solution.

@JulieMaida - do you want like this? if yes then add this css to the very end of your theme.css file and check

 

.text-with-icons__blocks .text-with-icons__block{padding: 12px;}

suyash1_0-1736050588754.png

 

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Replies 9 (9)

suyash1
Shopify Partner
10498 1293 1657

@JulieMaida - yes css can reduce the gap, can you please share this page link to view the page?

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
JulieMaida
Tourist
4 0 2
suyash1
Shopify Partner
10498 1293 1657

This is an accepted solution.

@JulieMaida - do you want like this? if yes then add this css to the very end of your theme.css file and check

 

.text-with-icons__blocks .text-with-icons__block{padding: 12px;}

suyash1_0-1736050588754.png

 

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
JulieMaida
Tourist
4 0 2

Thank you!! This worked. Thank you so much! 

suyash1
Shopify Partner
10498 1293 1657

@JulieMaida  welcome

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

devcoders
Shopify Partner
812 103 208

Hello @JulieMaida 


Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

jamestea45
Tourist
7 0 1

Hi Julie! 😊 You can definitely fix the large gap between columns with a bit of custom CSS. Try adding the following to your theme’s Custom CSS section:

 

/* Reduce gap between columns in 'Text Columns with Icons' on mobile */
.text-columns-with-icons {
    gap: 10px !important; /* Adjust the value to your preference */
}

@media (max-width: 768px) {
    .text-columns-with-icons__item {
        margin-bottom: 10px !important; /* Adjust spacing on mobile */
    }
}

 

JulieMaida
Tourist
4 0 2

Thank you so much! I found another one before your post that worked for me. Thanks so much for your help and your time!

DaisyVo
Shopify Partner
2834 339 394

Hi @JulieMaida 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

.text-with-icons__block {
    padding-inline: 5px !important;
}

 

Here is the result: image_720.png

 

I hope this helps

 

Best, 

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution