Shopify themes, liquid, logos, and UX
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.
password: Sila2020
Thanks in advance
Solved! Go to the solution
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.
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.
Worked perfectly.
Thank you very much.
You are welcome!
Hi Drake,
By any chance, do you know where can I do the same on a Dawn theme ?
Regards 😄
If you saw my instagram section, how can I make it wider?
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%;
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024