Removing White Space

New Member
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!

0 Likes
Shopify Staff
Shopify Staff
335 31 79

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

0 Likes
New Member
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

0 Likes
Shopify Staff
Shopify Staff
335 31 79

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

0 Likes
New Member
2 0 0

Hello May, thank you for your kind response and easy instructions, i did evertyhing and i double checked it and i did not see any changes after i save the file :) 

0 Likes
Shopify Staff
Shopify Staff
335 31 79

Hi again!

It’s my pleasure! I’m sorry to hear that the solution didn’t work out for you. In this case, I will send you an email to the email address attached to your forum account. Since you are using a theme made and supported by Shopify, our themes support team may be able to take a look into this for you if your account is eligible.

Keep your eyes peeled for the email! ?

Best 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

0 Likes
New Member
2 0 0

Did you every found how to fix this issue i been online for 3 days, still havent fixed issue????


 


 

0 Likes