Hi!
I would like to remove the side padding from the promotional grid.
Hope someone can assist.
Best,
Els
Topic summary
A user seeks to remove the left and right side padding (white space) from a promotional grid in Shopify’s Impulse theme, wanting the grid to span full width with only a 2px gap in the middle.
Problem Details:
- The promotional grid has unwanted white space on both outer edges
- The user wants full-width images with centered text/titles
- Store URL provided: https://la-gentile.com/
Solutions Offered:
Three community members provided different CSS code snippets to add to the theme files:
- Made4uo-Ribe suggested targeting specific flex-grid classes with justify-content properties
- PritTala recommended removing padding from the promo-grid section elements
- DaisyVo proposed adding CSS to theme.liquid file targeting
.promo-grid > div > div
Current Status:
The discussion remains unresolved. The initial solution affected text alignment (moving titles to edges instead of keeping them centered), which wasn’t the desired outcome. The user clarified they only want the outer padding removed while maintaining centered text alignment. No confirmed working solution has been marked yet.
1 Like
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!
Hello @lagentilestore
Share your site url and password it site is protected.
Please mark area of the padding that you want to remove
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.
Got it, try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- 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:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
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:
1 Like
PLease, take a look again on your sreen shot. The titles/text you like to align in the edge left and right?
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!
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 tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ
Here is the code for Step 3:
{% style %}
.promo-grid > div > div {
padding: 0 !important;
}
{% endstyle %}
Please let me know if it works. Thank you!Best,
Daisy - Avada Support Team
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..