Homepage Spacing Issue - Can you help please?

Solved
paulflaherty
Tourist
7 0 4

Shopify Theme: Flow

Hi Everyone

I'm looking for some assistance in trying to add a <h1> heading tag to be displayed on the following homepage. 

https://desiresoapsandcandles.com/

When I add a custom html block just under the main top banner, it appears to display a huge whitespace between the heading and the 3 images underneath.

In the timber.scss file, there is the following code below, but nothing seems to happen when I amend the value or remove the variable $gridSpacing

.shopify-section .homepage-sections-wrapper{
padding: $gridSpacing 0;
}

.shopify-section .homepage-sections-wrapper--white{
padding: $gridSpacing/1.65 0;
}

If anyone could give me any tips on how I can reduce the white spacing between these two elements please.

Paul


Ninthony
Shopify Partner
1792 258 704

h1 tags generally have a default bottom margin applied to them, and the line height may also not be set to match the text. If you could put your h1 tag back into the page, we can give you the code to reduce the whitespace.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
paulflaherty
Tourist
7 0 4

Hi 

I really appreciate the fast reply to my question.

I've just added the heading tag back into the homepage if you want to take another look. I have reduced the 30px padding but this just displayed the heading right underneath the banner. It is the space below which i am trying to resolve.

<div style="text-align:center; padding: 30px 0;"><h1>Handmade Soaps and Scented Candles </h1></div>

0 Likes
dmwwebartisan
Shopify Partner
5784 1323 1695

This is an accepted solution.

@paulflaherty 

Please add the following code at the bottom of your assets/timber.scss.liquid file.

.shopify-section .homepage-sections-wrapper--white {
    padding: 0px !important;
}
.featured-collections-wrapper .homepage-collections-background.content-width {
    padding-top: 0px !important;
}

Hope this works.
Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
paulflaherty
Tourist
7 0 4

Hi 

Thank you for providing a solution to my problem and it looks much better on desktop. However on a mobile device the space still looks quite big between the heading and the home fragrances graphic. Is there anything can be done to resolve this?  Would you reduce the size of the <h1>font?

Kind Regards

Paul

 

 

 

dmwwebartisan
Shopify Partner
5784 1323 1695

This is an accepted solution.

@paulflaherty 

Please add css class in your CSS file.

@media only screen and (max-width: 767px){
.template-index .grid__item {margin-top: 0px !important;}
.template-index .h1, h1 {font-size: 1.5em;}
}

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
paulflaherty
Tourist
7 0 4

Hi

I just wanted to say thank you for everyone who has helped me with my issue today and this has now worked on their website.

I can now relax for the rest of the day in work

Paul

dmwwebartisan
Shopify Partner
5784 1323 1695

@paulflaherty 

If helpful then please Like Solution.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes