Gif on Mobile Too Big - Stretches Site Off Page to the Right

[HumblebeeHouse]

Hi there - new to customizing my shopify store.  I wanted to add a gif to my homepage, but on mobile it stretches off the page to the right making it look weird. How can I get this GIF centered and fit correctly on mobile? Any help would be appreciated!

Here's the website to view: https://humblebeehouse.com/

[thirtycoders · Accepted solution]

Hi @HumblebeeHouse,

Simply follow these steps:

Navigate to Online Store -> Theme -> Edit code.
Search for the file "base.css"
Paste the provided code at the bottom of the file.
Save your changes.

@media screen and (max-width: 556px) {
.section-template--18388375732502__custom_liquid_4zpMha-padding img {
    width: 100% !important;
    height: 30vh !important;
}
}

Thank you

[HumblebeeHouse]

Excellent! That did the trick. Thank you so much @thirtycoders .

[thirtycoders]

You're welcome!

[HumblebeeHouse]

Quick question in a similar vein - is there a way to do this same thing without skewing a gif? I made a small chicken animation that is once again stretching the page to the left.  I used the same code you pasted but changed the custom liquid identifier and it did make it fit on the page, but made the gif too small. Is it possible to just force the website to stay within normal mobile width even if the gif overextends on the right side?

[thirtycoders]

Hi @HumblebeeHouse,

Please implement this code in base.css

Remove this code:

@media screen and (max-width: 556px) {
.section-template--18388375732502__custom_liquid_4zpMha-padding img {
    width: 100% !important;
    height: 30vh !important;
}
}

Implement this code:

@media screen and (max-width: 556px) {
section-template--18388375732502__custom_liquid_ghempA-padding img,
section-template--18388375732502__custom_liquid_4zpMha-padding img,
section-template--18388375732502__custom_liquid_KfybXr-padding img,
{
  max-width: 100% !important;
  margin: 0 auto !important;
}

body,html,*{
  overflow-x: hidden !important;
}
}

 
Thank you

[HumblebeeHouse]

You're a wizard!!!! Thank you so much.

[thirtycoders]

Thank you for your kind words! I'm glad I could assist.