Reducing White space between all sections in narrative theme

Store Design
1

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

2

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.

3 Likes
3

Worked perfectly.

Thank you very much.

4

You are welcome!

5

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

6

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%;
}
7

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

Regards :grinning_face_with_smiling_eyes:

8

Hello Drake,
Hope you’re doing well.
I would also need help. I am trying to redesign my shopify but there is some points I would love to explore further.

Is there a chance you work for companies ?

Many thanks,

Justine