Solved

Reducing White space between all sections in narrative theme

Silabela
Tourist
10 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

Accepted Solution (1)

drakedev
Shopify Partner
685 148 229

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 my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.

View solution in original post

Replies 6 (6)

drakedev
Shopify Partner
685 148 229

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 my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
Silabela
Tourist
10 0 0

Worked perfectly.

Thank you very much.

 

drakedev
Shopify Partner
685 148 229

You are welcome!

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
LauraT7
Visitor
1 0 0

Hi Drake, 
By any chance, do you know where can I do the same on a Dawn theme ?

Regards 😄

Silabela
Tourist
10 0 0

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

drakedev
Shopify Partner
685 148 229

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 my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.