Remove Whitespace

[SamiGiftsi]

Hiya,

I am looking to remove some whitespace from my homepage but unsure how to go about it. My website is www.thefavourstudio.co.uk

Firstly the white space below the banner near the top

the space below all of the ‘View All’ Buttons

The space below the 2nd banner further down the page.

[Moeed]

Hey @SamiGiftsi

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[SamiGiftsi]

Thanks ever so much for a speedy response.

This has removed the white space from below the banner at the top but the white space under the banner further down the page and above/below the ‘View all’ buttons remain to still be there?

[Made4uo-Ribe]

Hi @SamiGiftsi

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

div#shopify-section-hero_8ne4QL, div#shopify-section-hero_yD6pWA {
    padding-bottom: 0px;
}
div#shopify-section-collection hr.hr--invisible {
    margin: 20px;
}

And save.

result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Moeed]

Hey @SamiGiftsi

Keep the previous code and add this new code above in the end of theme.liquid file.

hr.hr--invisible {
    margin: 15px 0 !important;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[SamiGiftsi]

Thank you - Is it possible to remove the white from the following parts too? I am trying to limit how much wasted white space there is between sections.

[SamiGiftsi]

Hiya, This only seems to adjust the white around this one section not the others?

[Made4uo-Ribe]

Yes, only as you mention. Each section you have 55px each bottom and top. if you like all section will lesser the padding check ths code below.

div#shopify-section-collection hr.hr--invisible {
    margin: 20px;
}
@media only screen and (min-width: 750px) {
    .index-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

And save.

The margin is from the collection from the view all buttons.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[SamiGiftsi]

Thanks, I did ask in my original post about removing it from the Top Banner, The View All and the Bottom Banner.
This has worked, thanks again!