How can I eliminate excessive white space in my Narrative Theme?

How can I eliminate excessive white space in my Narrative Theme?

Eavan
Visitor
2 0 0

Hey folks! I'm looking to remove some white space in my Narrative Theme. Right now the Featured Collection has a large amount of white space above the Title. I would love to remove some of it so that it's not so big. Can anyone tell me where/ how to do that? I've tried to find the spot in the themescss but haven't had luck

If possible I would also like to expand the rows so that there is no margin on the sides of the site. Do you know this can be done?

 

Thank you!

Replies 56 (56)

May
Shopify Staff
333 33 176

Hi, Eavan!

This is May from Shopify.

I had the pleasure to visit your website, and I just have to say that your website is absolutely gorgeous! Great work on the images and color palette. While I am not an expert in coding, after inspecting your theme code, I was able to figure out one of your questions. Since you’re only interested in removing the space around ‘Featured Collection’ heading, you will want to edit your code in ‘featured collections’ liquid file, instead of ‘theme.scss.liquid’. The reason for this is that when I inspected the theme code, it looks like this heading does not have a unique class or ID. So, if you only edit ‘theme.scss.liquid’, your other <h2> headings on your website might also take effect on this code change.

From my experience, it looks like you are using Narrative theme by Shopify. That said, I will base my tutorial on the Narrative theme. It is important to note that different themes could have different file names and code structure. Before making any changes to your code, I highly recommend making a duplicate of your theme, to ensure that your customers aren’t affected by any unintended results. After you’ve done that, feel free to follow the steps below!

  1. From your admin, go to ‘Online Store > Actions > Edit code’.

  2. Open up ‘featured-collection.liquid’ file inside the ‘Sections’ folder.

  3. Look for this line of code         

    <h2>{{ section.settings.title }}</h2>

  4. Inside the <h2> tag, add

    style="margin-top:-60px; margin-bottom:-10px;"

    Your code should look like this: You can change the numbers ‘-60px’ and ‘-10px’ depending on how wide you’d like the spacing to be!

  5. Click ‘Save’.

For future reference, if you would like to change your ‘Featured Collection’ header back to what you had before, you can always roll back to an older version of your theme. If you are not comfortable with making this code change, I recommend reaching out to our Shopify Experts. Alternatively, if you are using a theme supported by Shopify, our theme developers may be able to look into making this change if your account is eligible!

As for expanding the rows of the products, it looks like this will not be a simple edit since you’ll need to consider the responsiveness of your site. Unfortunately, I do not have much experience with this, and it will be best to reach out to a Shopify Expert, or hopefully one of our lovely experts here can provide some insights!

Let me know if this helps. Feel free to reply back to this thread if you have any other questions about your theme! ?

Kind Regards,

May

Shopify Support


 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Marc_Nixon
New Member
4 0 0

Hi all,

 

I am having the same issue and would like to guidance....

 

Similar to the already asked question regarding removal of white spaces, I would like to know how to remove the white space that is halfway down on the homepage of my site.

 

We are using the Block Shop theme.

 

pic for may.png

oscprofessional
Shopify Partner
15938 2383 3092

Hello @Marc_Nixon,

Go to Online Store->Theme->Edit code->Asset->theme.scss.liquid->paste bellow code in bottom of file

#shopify-section-1530233365157 .instagram--root {
    padding: 0;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Marc_Nixon
New Member
4 0 0

this pink here.png

Hi!

 

Thank you for your help.

 

The white space has been reduced, but not fully removed?

 

Basically I would like it to be the same pink colour where the white space is.

Marc_Nixon
New Member
4 0 0

Hello again,

 

I hope you are well?

 

I am hoping you may be able to help with my issue of the white space as seen in the picture.

 

Best


@Marc_Nixon wrote:

this pink here.png

Hi!

 

Thank you for your help.

 

The white space has been reduced, but not fully removed?

 

Basically I would like it to be the same pink colour where the white space is.


 

oscprofessional
Shopify Partner
15938 2383 3092

@Marc_Nixon ,

Add below css

section.main-content {
    background-color: rgb(212, 170, 160);
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
sherifriad
Visitor
1 0 0

hello, i have the same issue, a white plain strip appearing under the header and right above the scrolling text that i cant remove

as shown attached, and i have tried to make the steps you mentioned but i coudnt find any asset named "theme.scss"

www.LV8Coffee.com

Veronikaden777
New Member
7 0 0
Hello,
Please help me to remove extra space in between Header and Heading. Basically I removed slide show and extra space still seen. Www.facemaskwithfilters.com
Thank you!
oscprofessional
Shopify Partner
15938 2383 3092

Hello @Veronikaden777,

Go to Online Store->Theme->Edit code->Asset->theme.scss.liquid->paste bellow code in bottom of file

body .index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
    margin-top: 0;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Veronikaden777
New Member
7 0 0
Thank you so much I fixed the first giving me code and it works now! Thanks a lot! Problem solved!
AntonColenbrand
Excursionist
17 0 17

Hi there, I have the same problem but don't have an Asset->theme.scss.liquid- file.  I do have the following files:  Asset->

theme.js.liquid and also Layout->theme.liquid but not sure if these are the correct files to be editing?

I am using VANTAGE Theme, Theme Style = BLACK

Needing to add some space above <H2> on the Home page and remove spaces on Collections Pages.

Below is my problem, please can someone assist:

 

On Home PageOn Home PageOn Collections PagesOn Collections Pages

 

 

Rohi
Tourist
9 0 0

Hi there 
I want to remove extra space from my blog in shopify store
The URL Store :  https://www.baytelkol.com/?_cd=8edcb5b5834241b1a1ce90ce1752c14a1f15ec86b618246c5936a75d175f6764&_uid...

 

Annotation 2020-07-19 150043.jpg

oscprofessional
Shopify Partner
15938 2383 3092

Hello Rohi,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

a.card__wrapper.card--article {
    height: 550px!important;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Rohi
Tourist
9 0 0

thanks for your response
i have the same problem of the big spaces in the other sections as you see in the attached images 
so please help me to remove it Annotation 2020-07-21 123306.jpg

 

Annotation 2020-07-21 123956.jpg

 

oscprofessional
Shopify Partner
15938 2383 3092

Hello Rohi,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and(min-width:750px){
.collection-list.collection-list--1593929313169 {
    padding-bottom: 20px;
}
.featured-blog.featured-blog--1592472568468 {
    padding-top: 20px;
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Rohi
Tourist
9 0 0

hi there 
i want to remove the spaces between the sections please 

Annotation 2020-07-26 154608.jpg

oscprofessional
Shopify Partner
15938 2383 3092

Hello Rohi,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

div#shopify-section-1595760921220 .featured-collection.collection-template {
    padding-bottom: 30px;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
REMILOOK
Visitor
2 0 0

Hi Shopify Community,

Please help, I have the same problem as many others here, but no code works for me that has been posted. I´m using the Boundless theme and I want to remove the whitespace between the product photo and description. I have done this to make the picture a little smaller, but the description text is still at bottom :

product__photo--single {
position: block;

img
{
position: absolute;
top: 0;
left: 0;
right: 0;
width: 80%;
z-index: 1;
transform: translateX(+13%);
}

 

Can someone please help me solve my problem?

Skärmavbild 2020-09-23 kl. 20.11.50.png

oscprofessional
Shopify Partner
15938 2383 3092

Hello REMILOOK,
Please share your site url.
So that i can check and let you know the exact solution here.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
REMILOOK
Visitor
2 0 0

Hello Oscprofessional,
My url is remilook.com.

 

Thank you!

BreeH
Tourist
3 0 1

I'm trying to figure out how to remove the white space above the video. I have the Debut theme and none of the solutions mentioned seemed to solve the issue. When I inspect the element it shows 55px of padding and if I remove that it fixes the issue but I can't seem to find that value anywhere in the .liquid screens to edit it.

Screen Shot 2020-10-01 at 3.17.54 PM.png

BreeH
Tourist
3 0 1

Are you able to provide any insight please!

 

 Thank You

re-spin
Visitor
1 0 0

Hello,

 

I am hoping someone could help me remove the white space below this black button to bring my product collection closer to the top. My Site URL is: www.re-spin.shop

Thanks in advance!

Screen Shot 2020-11-27 at 1.25.52 PM.png

oscprofessional
Shopify Partner
15938 2383 3092

Hello re-spin,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and (min-width: 750px){
#shopify-section-1604601315238f6aab .featured-collection__heading.grid.text-center {
    margin-bottom: 10px;
}
#shopify-section-1595542151699 .hero--small .hero__inner {
    padding-bottom: 10px;
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
sidus
Tourist
11 0 1

Hi,

could you also have a look on our store. We would like to remove the gaps in-between and also make this collection buttons (pics) in the middle.

Screenshot 2021-01-03 at 18.38.23.png

MarCologne
Excursionist
20 0 4

Hey guy, 

i want to remove the white space between the header (Logo) and the first picture. This my homepage. 

Do you have any idea? 

MarCologne_0-1610996514129.png

 

prinpadure
Shopify Partner
105 29 37

Hi @MarCologne 

Could you share your store url?

E-mail: rares.holota@gmail.com
Feel free to contact me
MarCologne
Excursionist
20 0 4

Hey.

My shop url:

www.hometowndesign.de

my password:

1testzugang!

prinpadure
Shopify Partner
105 29 37

@MarCologne 

Add this at the end of your theme.scss file:

.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
    margin-top: 10px;
}

You can change the value however you want

E-mail: rares.holota@gmail.com
Feel free to contact me
MarCologne
Excursionist
20 0 4

Thank you so much! It works!

artypods
Visitor
2 0 0

Screenshot (6).png

Hey dude, would help so much if you could figure this out for me

I would like to remove the space between the top and the images. I've been trying for hours and no solution has worked 😞

Only need it to look good on mobile:)

Website url: https://arty-pods.myshopify.com/?key=856df7dc9287c715a3b21a85e478fee641e4fc0e1f847c85df8533b734d6e0e...

Password: whohck

Marc_Nixon
New Member
4 0 0
Resolved!
prinpadure
Shopify Partner
105 29 37

Hello @artypods 

Add the following code at the end of your theme.scss file:

@media screen and (max-width: 425px) {
    .section-header {
        margin-bottom: 0;
    }
    
    body:not(.template-index) .main-content {
        padding-top: 0;
    }
    
    .section-header {
        display: none;
    }
}
E-mail: rares.holota@gmail.com
Feel free to contact me
artypods
Visitor
2 0 0

Just tried the code and it didn’t work 😞 messed up the site but luckily made a duplicate. Any other ideas?

Ryan-Mo
Tourist
6 0 0

Hi @prinpadure 

I literally tried out every piece of code published here but nothing worked for me!

I have removed the breadcrumb but as you can see, the white space still there. Though, i'd like to remove the white space between the header and product grid (see attached image) I really appreciate the help.

whitespace.png

prinpadure
Shopify Partner
105 29 37

Hi @Ryan-Mo 

Can you share your store url?

E-mail: rares.holota@gmail.com
Feel free to contact me
Ryan-Mo
Tourist
6 0 0
Hi again, yeah of course here is plushyz.com Password: flocre Thank you.
Ryan-Mo
Tourist
6 0 0
Hi @prinpadure, yeah of course here is www.plushyz.com Password: flocre Thank you.
Ryan-Mo
Tourist
6 0 0

Hi @prinpadure, yeah of course here is www.plushyz.com Password: "flocre" Thank you.

prinpadure
Shopify Partner
105 29 37

@Ryan-Moadd the following css at the bottom of your frame.scss file:

@media screen and (max-width: 767px) {
  .dt-sc-hr-invisible-large {
    margin: 0;
    }
  .product-single > .grid__item > .post-large--one-half {
    margin-top: 0;
    }
}

 

E-mail: rares.holota@gmail.com
Feel free to contact me
Ryan-Mo
Tourist
6 0 0

Hi @prinpadure, it worked perfectly, thank you so much. I don't wanna be rude but if there's a way to change the VARIANTS MENU to a DROPDOWN MENU. I would be so grateful. Thanks again 

femformapparel
Tourist
10 0 0

Hello,

My site is shopfemform.com

I am trying to remove the white space below my header video. (between header video and featured collection). My theme is Debut. Could anyone assist?

GKDentallab
Visitor
1 0 0

Screenshot 2023-10-14 at 8.47.53 AM.png

Hi I have a question, how can I remove this white spaces, my url gkdentallabinc.com

berniedlr
Shopify Partner
1 0 0

Hi oscprofessional, can you also help me with this? I'm using Impact theme and I am also having idsues with spaces. Please see the picture.white space shopify.jpg

LifePath9
Visitor
3 0 0

Paste this code into any liquid file. 

 

<h2 style="margin-top:-60px; margin-bottom:-10px;">({section.settings.title})</h2>

 

LifePath9_0-1702003271339.png

hope this helps 

FlagLamps_com
Tourist
8 0 7

Hello May, You have been so helpful to folks here with their white space issues and I would appreciate your assistance as well.  My site is FlagLamps.com and I'm using the Debut Theme.

I would like to lessen the vertical white space between my top most custom content and the title of my catalogs section "CATALOGS".  I would also like to put another blank line just above the NEWS UPDATE... text in that same custom content section.  And indent the text NEWS UPDATE so it aligns with the bullets just above it. Thanks!

 

Whitespace snip screen.JPG

FlagLamps_com
Tourist
8 0 7

You can disregard.  I switched to Craft Theme and this one is better suited for my products and no white space issues. 

vettel41
Visitor
2 0 0

where do i have to modify the code if i want to make my whole website wider also i have the supply theme? thanks in advance

May
Shopify Staff
333 33 176

Hi, there!

May again here from Shopify.

I was looking into Supply theme’s source code, and was able to figure out a code snippet that could work to make your website wider. I’d like to mention once more that I am not an expert in coding, so the solution below might not be the best. Just as a quick reminder, please duplicate your theme before you proceed with the steps below, in case of any unintended results. Here are the steps to edit your code:

  1. Open up your theme code editor by going int ‘Online Store > Actions > Edit code’.

  2. In your ‘Assets’ folder, click on ‘theme.scss.liquid’.

  3. Paste the following code on the very bottom of this file:

    .wrapper, .main-content, .shopify-section {
    
     max-width: none !important;
    
    }

     

  4. Click ‘Save’.

Unlike other liquid files within your theme, you cannot revert back to an older version of your ‘theme.scss.liquid’ file. Therefore, I strongly recommend duplicating your theme before making changes to your code. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made by Shopify, our theme support may be able to look into making the change as well if your account is eligible!

If this isn't quite what you were after, let me know and we can continue with our support.

Kind Regards,

May

Shopify Support


 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog