What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: How to remove side padding from promotion grid Impulse theme

Solved

How to remove side padding from promotion grid Impulse theme

lagentilestore
Excursionist
56 0 11

Hi!

Can someone help me with removing the side padding from the promotion grid on my home page? There should be some spacing in between each image but not at the sides. I did mark 'full  page width'. See print screen. 

Hope someone can help me out!Scherm­afbeelding 2024-10-08 om 14.46.14.png 

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
9141 2181 2693

This is an accepted solution.

Replace on this code. Same Instruction. 

 

.flex-grid__item--advanced_XWNqEq.type-advanced {
    padding-left: 0 !important;
}
.flex-grid--template--23623613415757__promo_grid_WejeYc {
    padding-right: 0 !important;
}
@media only screen and (max-width: 749px){
.flex-grid__item--advanced_dE7Cwc.type-advanced {
    padding-left: 0 !important;
}
}

 

And Save.

Result:

Made4uoRibe_0-1728395120948.png

Made4uoRibe_1-1728395284716.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.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
9141 2181 2693

Hi @lagentilestore 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

 

.flex-grid--template--23623613415757__promo_grid_WejeYc .flex-grid__item {
    padding-left: 0 !important;
}
.flex-grid--template--23623613415757__promo_grid_WejeYc {
    padding-right: 0 !important;
}
@media only screen and (max-width: 749px){
    .flex-grid--template--23623613415757__promo_grid_WejeYc .flex-grid__item {
        padding-top: 0 !important;
    }
}

 

And Save. 

Result:

Made4uoRibe_0-1728393352270.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.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
lagentilestore
Excursionist
56 0 11

Thank you but now the space in between the picture is gone as well.. It should only remove the side space (see red circles) 

Made4uo-Ribe
Shopify Partner
9141 2181 2693

This is an accepted solution.

Replace on this code. Same Instruction. 

 

.flex-grid__item--advanced_XWNqEq.type-advanced {
    padding-left: 0 !important;
}
.flex-grid--template--23623613415757__promo_grid_WejeYc {
    padding-right: 0 !important;
}
@media only screen and (max-width: 749px){
.flex-grid__item--advanced_dE7Cwc.type-advanced {
    padding-left: 0 !important;
}
}

 

And Save.

Result:

Made4uoRibe_0-1728395120948.png

Made4uoRibe_1-1728395284716.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.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
lagentilestore
Excursionist
56 0 11

This worked! Many thanks!

Made4uo-Ribe
Shopify Partner
9141 2181 2693

Welcome! Would you mind hitting 'like' as well? 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.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

PageFly-Amelia
Shopify Partner
626 165 237

Hi @lagentilestore 

This is Amelia from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code. 

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

.flex-grid__item.flex-grid__item--50.type-advanced {

    padding-left: 0 !important;

}

.flex-grid.flex-grid--gutters.flex-grid--template--23623613415757__promo_grid_WejeYc {

    margin-left:  0 !important;

    padding: 0 !important;

}

 

Hope that my solution works for you.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.