How do I remove this empty space on footer?

gmuink · ‎12-19-2024

Hi,

I turned off the footer section but I still do have the dead space in the below.

I want the background image to just fit perfectly to the size of the desktop and mobile.

@media screen and (max-width: 749px) {

#Banner-{{ section.id }} .banner__content {

height: 100vh;

I believe above code somewhat helped but not completely.

https://yq4bwg-7h.myshopify.com/

pw: wellwell

Thank you!

Dan-From-Ryviu · ‎12-19-2024

Please update this CSS code in your theme.liquid after <head> to this to solve this issue

<style>
.section-header .header-wrapper * { color: #black; }
.section-header .header-wrapper .header__heading-logo { filter: invert(1); }
.section-header .header-wrapper { background: transparent; }
#MainContent { margin-top: -93px; }
.section-header.scrolled-past-header .header-wrapper { background: #fff !important; }
.section-header.scrolled-past-header .header-wrapper .header__heading-logo { filter: unset !important; }
.section-header .header-wrapper .mega-menu__link,
.section-header .header-wrapper .list-menu__item,
.section-header.scrolled-past-header .header-wrapper * { color: #121212bf !important; }
@media (max-width: 749px) {
#MainContent { margin-top: -73px; }
}    
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

DaisyVo · ‎12-19-2024

Can you share store password to we check for you?

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

gmuink · ‎12-19-2024

Hi,

it's wellwell

DaisyVo · ‎12-19-2024

HI @gmuink

I saw that you have removed the footer, would you please add it back so we can edit it for you?

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

gmuink · ‎12-19-2024

Hi Daisy,

just did. Thank you.

DaisyVo · ‎12-19-2024

Hi @gmuink

To complete your requests, please follow these steps:

Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
Paste the code provided into the Custom CSS section.

footer.footer {
    margin-top: 0 !important;
}

Here is the result: https://prnt.sc/HjJ0IZFHiopq

I hope this helps

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

gmuink · ‎12-19-2024

Sorry it does not do anything. I checked your result link but it seems nothing changed as well.

I want all the white parts to be completely removed.

DaisyVo · ‎12-19-2024

Hi @gmuink

I gave you the code to remove the small white part, the remaining white part is the footer, you just need to turn it off now https://prnt.sc/przkDrVslCGx

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

gmuink · ‎12-19-2024

Sorry turning off the footer still leaves white space with the code you gave me 😞

IoannisM · ‎12-19-2024

Hi, my solution to this kind of problems is to use "object-fit" css property.
This goes into a css file:

.cover-image-container {
    position: relative;
    overflow: hidden;
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

Then, add the class "cover-image-container" to the parent element, and the "cover-image" on the img tag.

- If my answer was helpful, you can buy me a coffee.
- If you need more complex CSS, JS, and Liquid customization, contact me here.

Dan-From-Ryviu · ‎12-19-2024

Please update this CSS code in your theme.liquid after <head> to this to solve this issue

<style>
.section-header .header-wrapper * { color: #black; }
.section-header .header-wrapper .header__heading-logo { filter: invert(1); }
.section-header .header-wrapper { background: transparent; }
#MainContent { margin-top: -93px; }
.section-header.scrolled-past-header .header-wrapper { background: #fff !important; }
.section-header.scrolled-past-header .header-wrapper .header__heading-logo { filter: unset !important; }
.section-header .header-wrapper .mega-menu__link,
.section-header .header-wrapper .list-menu__item,
.section-header.scrolled-past-header .header-wrapper * { color: #121212bf !important; }
@media (max-width: 749px) {
#MainContent { margin-top: -73px; }
}    
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

gmuink · ‎12-19-2024

This was what I was looking for thank you

Dan-From-Ryviu · ‎12-19-2024

You are very welcome!

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

How do I remove this empty space on footer?

How do I remove this empty space on footer?

Community Blog Articles