Impulse Theme Promotional Grid & Product Section Padding

Store Design
1

Site - vibovisionboards.myshopify.com

Pw - whauch

How can I reduce the white space between my promotional grid and product sections.

Thanks.

2

Hello @VIBO which section do you mean? can you attach screenshot ?

3

Screen Shot 2022-04-08 at 11.31.13 pm.png
Screen Shot 2022-04-08 at 11.31.13 pm.png1418Ă—435 145 KB

Hi Kaza, it’s the two sections in the screenshot above. The promotional grid and the product, both sections are on the home page

Thanks.

4

@VIBO add this css in assets > theme.css bottom of file

div#shopify-section-template–14597958795316__164945291734a26bb8 {
margin-top: 0;
}

5

Brilliant, that seems to have worked.

Am I correct in thinking that the alpha-numeric code 14597958795316__164945291734a26bb8 identifies the section that the changes are applied to? If so, is it possible to tell me how I can find these codes so I can implement these changes to other sections in the future?

Thanks,

Jeremy

6

@VIBO right click on the element / section and click “inspect” on chrome or other browser and find the Div / section ID, for id you have to add hash # before it for class dot .

Example

for id - #shopify-section-template–14597958795316__164945291734a26bb8

for class - .shopify-section-template–14597958795316__164945291734a26bb8

section.png
section.png1349Ă—649 92.4 KB

on the right side of inspector tool you will current applied css and you can add live css rule to check if this working then finally open css file and add the css there

#shopify-section-template–14597958795316__164945291734a26bb8 {

margin-top:0;

}

or for class

.shopify-section-template–14597958795316__164945291734a26bb8 {

margin-top:0;

}

Here you can find more https://www.inmotionhosting.com/support/website/google-tools/how-to-edit-css-using-google-chrome-developer-tools/#:~:text=Press%20Ctrl%20%2B%20Shift%20%2B%20i%20for,elements%20to%20modify%20them%20live.

or google “how to use chrome inspector and css”

1 Like