Help with GIF on ? page

Store Design
, ,

Topic summary

Issue: After adding a GIF to the homepage, mobile displays it better but shows a persistent white strip at the bottom; on desktop the GIF appears too large. Screenshots were shared to illustrate the problem.

Proposed fixes:

  • Provide store URL and password for a direct check.
  • Insert custom code in theme.liquid (above the tag) to adjust layout behavior.
  • Add CSS to remove extra space and ensure proper sizing:
    • Set .gif-container { padding:0; margin:0; }
    • Ensure .gif-container img { width:100%; height:auto; display:block; }
    • Apply html, body { overflow-x:hidden; margin:0; padding:0; }
    • Use .page-container { min-height:100vh; box-sizing:border-box; }
  • Alternatively, add code in theme.liquid above . Example result screenshots for desktop and mobile were provided.

Notes: Suggestions focus on eliminating extra padding/margins, preventing horizontal overflow, and making the GIF fit its container on both mobile and desktop. Images are central to understanding the visual issue and proposed outcomes.

Status: The original poster will test the suggestions and report back. No confirmed resolution yet; discussion remains open.

Summarized with AI on December 16. AI used: gpt-5.
1

66471f70-3ea8-49b5-9957-40d8dc3072b3.jpeg
66471f70-3ea8-49b5-9957-40d8dc3072b3.jpeg1200×1600 144 KB

IMG_6680.png
IMG_6680.png1179×2556 146 KB

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 :folded_hands:t2:

1 Like
2

Hello @PRGMD

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

3

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 tag

RESULT:

Moeed_0-1729493834699.png
Moeed_0-1729493834699.png370×665 44 KB

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

Best Regards,
Moeed

4

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

5

@PRGMD ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above

Result:

  • Desktop

BSSCommerceB2B_0-1729494003014.png
BSSCommerceB2B_0-1729494003014.png1145×918 78.3 KB

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

Best Regards :blush:

1 Like
6

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

1 Like