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

[Eavan]

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!

[May]

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

[Marc_Nixon]

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.

[oscprofessional]

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

[Marc_Nixon]

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]

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:

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]

@Marc_Nixon ,

Add below css

section.main-content {
    background-color: rgb(212, 170, 160);
}

[sherifriad]

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]

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]

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

[Veronikaden777]

Thank you so much I fixed the first giving me code and it works now! Thanks a lot! Problem solved!

[AntonColenbrand]

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 Collections Pages

[Rohi]

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

[oscprofessional]

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

[Rohi]

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

[oscprofessional]

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

[Rohi]

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

[oscprofessional]

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

[REMILOOK]

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?

[oscprofessional]

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

[REMILOOK]

Hello Oscprofessional,
My url is remilook.com.

Thank you!

[BreeH]

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.

[BreeH]

Are you able to provide any insight please!

 Thank You

[re-spin]

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!

[oscprofessional]

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

[sidus]

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.

[MarCologne]

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? 

[prinpadure]

Hi @MarCologne 

Could you share your store url?

[MarCologne]

Hey.

My shop url:

www.hometowndesign.de

my password:

1testzugang!

[prinpadure]

@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

[MarCologne]

Thank you so much! It works!

[artypods]

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]

Resolved!

[prinpadure]

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

[artypods]

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

[Ryan-Mo]

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.

[prinpadure]

Hi @Ryan-Mo 

Can you share your store url?

[Ryan-Mo]

Hi again, yeah of course here is plushyz.com Password: flocre Thank you.

[Ryan-Mo]

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

[Ryan-Mo]

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

[prinpadure]

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

[Ryan-Mo]

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]

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]

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

[berniedlr]

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.

[LifePath9]

Paste this code into any liquid file. 

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

hope this helps 

[FlagLamps_com]

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!

[FlagLamps_com]

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

[vettel41]

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]

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