BIG WHITE GAP BETWEEN HOMEPAGE SECTIONS

climaxcosmetics
Tourist
11 0 1

I just asked this question in the forum and realised I have another area on my homepage that has a major white gap!

Between image slideshow and newsletter sign up! Am I doing something that is creating these gaps?

Can I remove this gap here :)?


Thank you!

Untitled.png

Replies 15 (15)
Zeian_Shahzad
Shopify Partner
432 81 130

@climaxcosmetics,

Please share your store URL also the preview code if password protected. 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
Zeian_Shahzad
Shopify Partner
432 81 130

@climaxcosmetics,

Add this code at the bottom of your theme.css file. 

.newsletter-section {
    padding-top: 0px !important;
}

Each section has some top and bottom padding (Gaps), we can reduce it if you want. You have added some css code incorrectly in the theme.css file which is creating some gaps for the header, under the footer, and other elements. Do let me know if the following code reduces the gap for the newsletter section.

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
climaxcosmetics
Tourist
11 0 1

That made a difference! THANK YOU!!

Could you please give me a code for another gap I have please?

I got an even bigger gap between 'gallery' and a review carousel that I have added to my homepage!

Untitled.png

Zeian_Shahzad
Shopify Partner
432 81 130

These gaps are happening because of these line of code.

What was the purpose of adding those? as this (class) is linked with other code too.

 

.grid__item {
    position: relative;
    min-height: 450px;
}
.grid__item form {
    position: absolute;
    bottom: 0px;
    margin-bottom: 15px;
}

@media only screen and (max-width: 769px) {
  .grid__item {
    min-height: 350px;
  }
}

 

 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
Zeian_Shahzad
Shopify Partner
432 81 130

You can see this it's also effecting product page styling.

Climax-Cosmetics (1).pngClimax-Cosmetics.png

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
climaxcosmetics
Tourist
11 0 1

Something has gone wrong somewhere! Oh no!

Sorry which product page is that? When I click my SHOP button my products seem to show up fine!?

climaxcosmetics
Tourist
11 0 1

Removing this code helped all those big gaps! Yay!

But I had added that because my product layout is all wonky. If you click 'ggbeautyshop' you will see the add to cart button, the photos, alignment is off. That code had fixed that. 
Not sure how to align everything correctly without that code...

Zeian_Shahzad
Shopify Partner
432 81 130

@climaxcosmetics,

It is showing that way because you haven't added the product image yet. Add the product image and test.
Good Luck. 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!