Reducing White space between all sections in narrative theme

Solved
Highlighted
New Member
3 0 0

Hi Everyone,

How can i reduce the empty/white space between all sections through out my website (i have narrative theme)

My website is still not ready, but here is the link.

www.silabela.com

password: Sila2020

 

Thanks in advance

0 Likes
Highlighted

This is an accepted solution.

Hi Silabela,

for Narrative theme you can edit your theme file theme.scss.liquid inside Assets folder.

Around line 521 you can see the spacing values for desktop and mobile.

$gutter is equal to 20px therefore the default spacing top and bottom of the sections is 140px for desktop and 80px for mobile.

You can try this

 

/*================ Section Vertical Spacing ================*/
$section-desktop-space: $gutter * 2;
$section-mobile-space: $gutter * 1;

 

and tune based on your preferences.

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
1 Like
Highlighted
New Member
3 0 0

Worked perfectly.

Thank you very much.

 

0 Likes
Highlighted

You are welcome!

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Highlighted
New Member
3 0 0

If you saw my instagram section, how can I make it wider?

0 Likes
Highlighted

It takes 50% of the space because it seems that it is placed inside an half-column element.

Check the themes customization section to see if there is a way to change the behavior of your custom content.

In the worst case you can use this CSS code at the end of your themes.scss file.

 

/* Instagram Widget */
.custom__item.custom__item--1601581941450.medium-up--one-half {
    width: 100%;
}

 

 

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes