PRGMD
October 21, 2024, 6:51am
1
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
1 Like
Hello @PRGMD
Please share your store URL and password.
So that I will check and let you know the exact solution here.
Moeed
October 21, 2024, 6:57am
3
Hey @PRGMD
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
rajweb
October 21, 2024, 6:58am
4
Hey @PRGMD ,
Fix the issue by Adding CSS: In shopify, you can adjust the CSS to remove unnecessary white space.
Follow these steps:
Online Store > Themes
Click Customize and open Theme Settings.
Edit Code
theme.css, styles.css.liquid, or similar CSS files.
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
@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:
If it helps you, please like and mark it as the solution.
Best Regards
1 Like
PRGMD
October 21, 2024, 7:08am
6
Thanks I will give this a go later today and let you know if it works!
1 Like