Remove white space/padding below header and above slideshow - Supply Theme

Store Design
1

Hi all,

I have just managed to make my slideshow on my supply theme full width by giving it its own section. I literally just added {% section ‘slideshow’ %} next to {% section ‘header’ %} part of the code within theme.scss.liquid.
So, now the issue I now seem to have is two blocks of padding between the header and the new slideshow.
Adding code to the bottom of the theme.scss.liquid to remove the main content top padding did not work as I have had to put the slideshow in its own section to make sure it’s full width. All this did was remove space between the first line of text on the website, and the slideshow.

Sorry if I have explained this is a round about way, but if anyone knows how I can get rid of this space, I would greatly appreciate it.

https://1qxa6t5qeqgoa6hz-62453743830.shopifypreview.com

P.s. I had to put the slideshow in its own section/container because trying to force it into being full width with lazy code at the bottom of the Theme.scss.liquid or theme.liquid was not working, likely because the whole of the main body of the supply theme is within one container.

2

Okay so kind of solved this my self so just going to put a brief of what I did to make the slideshow full width and remove the white space.

Step 1:
Find {% section ‘header’ %} within theme.liquid. For me this was under the ‘Header hook for plugins’ section of the theme.liquid. Then simply add {% section ‘slideshow’ %} right next to it, so it looks like this:

{% section 'header' %}{% section 'slideshow' %}

Tip: If you struggle to find this line, just search for header, or as it should be around that sort of area. Basically you want to make sure this new section goes between the header section and footer section. (There isn’t a {% section ‘main’ %} that I could see - just which you should fine right below the ligh you are looking for.

Step 2: You will need to add a new slideshow section within the theme editor as the old slideshow will still be stuck within the main container. Simple then drag that new section to the top or where you want it.

To ensure the slideshow size doesn’t go back to normal after adding a new picture to the slideshow, you will need to go into slideshow.liquid and do the following:

Find: (Should be quite near the top)

{%- assign image = block.settings.slide -%}
            {%- capture img_wrapper_id -%}slideShowImageWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
            {%- assign max_width = 1000 -%}
            {%- assign max_height = 1500 -%}

and change the width to full and amend height as required. Here is how mine looks:

{%- assign image = block.settings.slide -%}
            {%- capture img_wrapper_id -%}slideShowImageWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
            {%- assign max_width = full -%}
            {%- assign max_height = 2000 -%}

Step 3: While still in the slideshow.liquid, you should or might find a

in the very first line. Simply delete this and this should remove the space, as it did for me.

I really hope this helps someone else!