Want to remove shop title and remove gap

Great! Here is a code you can try:

.gb-container.gb-container-983779d4 {
    position:relative;
}

.gb-button-wrapper.gb-button-wrapper-500ed22e {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

article.page .inside-article{
    padding-bottom:0;
}

You can remove the button margin-top: -90px you added. I also added CSS to remove the bottom padding :)

Kindly let us know how it goes. Hope this helps! :)

Hi,

Thanks for the button code!
I put that code, but most of page has quite big white area gap between footer and content except shop page.
Please let me know.
thank you.

Regards,

Lee

Can you try modifying the current code to something like this?:

.gb-container.gb-container-983779d4 {
    position:relative;
}

.gb-button-wrapper.gb-button-wrapper-500ed22e {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.content-area article div.inside-article{
    padding-bottom:0;
}

Hope this helps! :)

hi there,

still no luck :(

Currently, this is what I see: https://share.getcloudapp.com/E0uo0qd8

You can further remove the margin set by modifying the current code to this:

.gb-container.gb-container-983779d4 {
    position:relative;
}

.gb-button-wrapper.gb-button-wrapper-500ed22e {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.content-area article div.inside-article{
    padding-bottom:0;
}

.content-area .site-main{
    margin-bottom:0;
}

I believe the remaining whitespace that would remain would be there because the content in some pages is less than 100% viewport height. If you remove this rule, then the whitespace would simply go under the footer.

Specifically, the rule set previously(min-height) pushes/forces the content to be 100% viewport height to accommodate the lack in content height in some pages, evidently pushing the footer down.

Hope this clarifies. :)

hi there,

thanks for the reply.
from my screen there are still same gap if I put that code or remove. I cleared cache, what's the reason? with or without code it shows same size gap.

I can see that button CSS are clearly working.

Please let me know.

Thanks.

I tried from other Mac but it has same gaps which are different from your videos...

Hi there,

is there a specific page i can see one of these additional spaces?

all the page except shop page.

I attached screens that I am seeing. only shop page had small gap.

https://ibb.co/S0WGXvw
https://ibb.co/sKkpyxn
https://ibb.co/RPWz1k3
https://ibb.co/9Nfg33d
https://ibb.co/Sd9DVcH
https://ibb.co/jGbT1yr

1. Homepage doesn't have the issue: https://www.screencast.com/t/IrDTydykhWg

2. Shop page doesn't have the issue.

3. About page: https://www.screencast.com/t/9bE2NATww
1) This columns block has multiple levels with paddings/margins.
2) There're also two spacer blocks taking some space.

4. Blog page is because of this CSS, the body has to be at least 100vh:
https://www.screencast.com/t/1qUy6jPsj

5. Wholesale page doesn't have this issue: https://www.screencast.com/t/pDv4TPj6

6. Account page: the same as blog page.

7. Contact page: the same as blog page.

Hi again,

Why it showing differently on my screen? I fixed about us page.

By the way when I add a featured image on the page then It has no gap on the bottom. That's why about us page is showing all right.
Do you know the reason?

Thanks

Hi there,

When I remove those code you gave me, which are codes for remove white area under the footer, all the page showing no gaps between footer and bottom of the content, but when I add below code it has gaps. how do I fix this? I wanted to remove gaps between and also remove white area under footer.

body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container.grid-container {
width: 100%;
}
.site-footer {
margin-top: auto;
}

Yes, when I remove those code which are for removing white area under the footer, it has no gaps between footer and content now for all pages, but without this it has white are under the footer again, any advice to solve this issues?

body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container.grid-container {
width: 100%;
}
.site-footer {
margin-top: auto;
}

I see it now. That's to be expected as the footer has been programmed (with the CSS added previously) to "stick" to the bottom of the page.

There isn't technically any padding there it's just that the footer is set to stick to the bottom of the page using the CSS added previously. This can be seen by adjusting the window height. If the screen size is taller than the content+header+footer the gap between the content and footer will increase.

I wouldn't think about it as removing the space (as it depends on the device height and the amount of content) but rather if I want the footer to stick to the bottom of the page or stick to the bottom of the content.

Thanks anyway.