How to remove side padding from promotion grid Impulse theme

How to remove side padding from promotion grid Impulse theme

lagentilestore
Excursionist
63 0 13

Hi! 

I would like to remove the side padding from the promotional grid.
Hope someone can assist.

Best,
Els

Scherm­afbeelding 2025-02-03 om 15.47.53.png

Replies 9 (9)

Made4uo-Ribe
Shopify Partner
10211 2427 3081

Hi @lagentilestore 

Please, clarify which padding you like to remove? As I see only the announcement bar, header and image banner. Please, share your store URL also. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
lagentilestore
Excursionist
63 0 13

My Excuse! Please see the red arrows. The left and right side (2 px white space) should be removed. The grid should have the full wide with only 2 px space in the middle.

https://la-gentile.com/

Scherm­afbeelding 2025-02-03 om 15.47.53.png

 


Made4uo-Ribe
Shopify Partner
10211 2427 3081

Got it, try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.flex-grid__item--advanced_Fg4XQg .promo-grid__container {
    justify-content: flex-start !important;
}

.flex-grid__item--advanced_hCntFP .promo-grid__container {
    justify-content: flex-end !important;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1738595984671.png

     

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
lagentilestore
Excursionist
63 0 13

It's not working unfortunately.. Please see screen shots attached.

Scherm­afbeelding 2025-02-03 om 16.25.11.png

Scherm­afbeelding 2025-02-03 om 16.25.06.png

  

PritTala
Shopify Partner
27 2 4

Add this css to your css file!

[data-section-type="promo-grid"] .flex-grid__item,
[data-section-type="promo-grid"] .flex-grid{
    padding: 0 !important;
}

 

Result:

PritTala_0-1738597259972.png

 

 

Worked for you? Like and accept the solution!

Prit Tala - Shopify Developer
Contact: Prittala2111@gmail.com
Made4uo-Ribe
Shopify Partner
10211 2427 3081

PLease, take a look again on your sreen shot. The titles/text you like to align in the edge left and right? 

Made4uoRibe_0-1738598234883.png

This what I see on my end. The code works. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
lagentilestore
Excursionist
63 0 13

Hi,

No the titles/text should be aligned in the middle not on the left and right. 
How can I fix this? 

I just want the white space (padding) removed on the left and right side of the promotional grid..

PritTala
Shopify Partner
27 2 4

Hello @lagentilestore 

Share your site url and password it site is protected.

Please mark area of the padding that you want to remove

Worked for you? Like and accept the solution!

Prit Tala - Shopify Developer
Contact: Prittala2111@gmail.com

DaisyVo
Shopify Partner
4460 499 594

Hi @lagentilestore 

 

I hope you are well. You can follow our instructions below:1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

 

Here is the code for Step 3:

 

 

{% style %}
.promo-grid > div > div {
    padding: 0 !important;
}
{% endstyle %}

 

 

DaisyVo_0-1738600450046.png

Please let me know if it works. Thank you!Best,
Daisy - Avada Support Team

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