Solved

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

HumblebeeHouse
Tourist
8 0 0

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/

Accepted Solution (1)

thirtycoders
Shopify Partner
108 19 24

This is an 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;
}
}

thirtycoders_0-1709748428488.png


Thank you

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com

View solution in original post

Replies 7 (7)

thirtycoders
Shopify Partner
108 19 24

This is an 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;
}
}

thirtycoders_0-1709748428488.png


Thank you

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
HumblebeeHouse
Tourist
8 0 0

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

thirtycoders
Shopify Partner
108 19 24

You're welcome!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
HumblebeeHouse
Tourist
8 0 0

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
Shopify Partner
108 19 24

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

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
HumblebeeHouse
Tourist
8 0 0

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

thirtycoders
Shopify Partner
108 19 24

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

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com