Help with GIF on 🏡 page

[PRGMD]

 

 

Ive added a GIF to my homepage on the mobile version it shows better than the website, but on the phone Ive also got a white strip at the bottom of my page I can’t seem to get rid of. On the phone it’s just close to the top of the page but on the computer version it’s way too big. 

Can anyone help me with this issue, please and thank you🙏🏻

[ZestardTech]

Hello @PRGMD 

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[Moeed]

Hey @PRGMD 

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 </body> tag

<style>
body.gradient {
    background: black !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[rajweb]

Hey @PRGMD ,

Fix the issue by Adding CSS: In  shopify, you can adjust the CSS to remove unnecessary white space.

Follow these steps:

1. Online Store > Themes 

2. Click Customize  and open Theme Settings.

3. Edit Code 

4. theme.css, styles.css.liquid, or similar CSS files.

5. Scroll to the bottom of the file and add the following CSS:

/* Remove extra space around GIF on mobile and desktop */
.gif-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure the GIF fills its container properly */
.gif-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Fix white strip at the bottom */
html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.page-container {
    min-height: 100vh;
    box-sizing: border-box;
}

Let me know if the issue persists or if you need further help!

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[BSSCommerce-B2B · Accepted solution]

@PRGMD,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
#Banner-template--24020467286356__image_banner_WBF6Gz img {
  object-fit: contain;
}
#Banner-template--24020467286356__image_banner_WBF6Gz .banner__media {
  background: #000;
}
@media only screen and (min-width: 750px) {
#Banner-template--24020467286356__image_banner_WBF6Gz {
  min-height: 54vh;
}
}
@media only screen and (max-width: 749px) {
  #Banner-template--24020467286356__image_banner_WBF6Gz .banner__media {
    min-height: 61vh
  }
}
</style>

Result:

• Desktop

• Mobile: 

If it helps you, please like and mark it as the solution.

Best Regards 😊

[PRGMD]

Thanks I will give this a go later today and let you know if it works!