Notifications
Clear all

[Solved] GIF Comment Cropped

10 Posts
2 Users
0 Reactions
895 Views
Posts: 11
Customer
Topic starter
(@ferdinand-rodriguez)
Member
Joined: 2 years ago

Hello.  the GIPHY Integration works great except some wider GIFs are cut off in mobile.  Is there a way to make it zoom to fit instead of being cropped?  When I rotate my phone to landscape, it looks great.  Portrait mode, it gets cut off.  Please see screenshot.  Thanks!

Weirdest Specimen Containers   The Mislabeled Specimen Fun Lab Questions

 

9 Replies
Astghik
Posts: 5956
Admin
(@astgh)
Illustrious Member
Joined: 7 years ago

Hi Ferdinand Rodriguez,

Please leave an example URL where we can see the issue. 

2 Replies
Customer
(@ferdinand-rodriguez)
Joined: 2 years ago

Member
Posts: 11
Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 5956

@ferdinand-rodriguez,

Please use the CSS code below:

@media screen and (max-width: 600px){
     .wpdiscuz-giphy-embedded-gif-wrapper.wpdiscuz-giphy-full-gif {
         width: 100%;
     } 
}

Put the code in the Top Admin Bar > Customize > Additional CSS > "Additional CSS" textarea, save it, delete all caches and check again.

Also, please try on incognito mode if you're checking on mobile devices. Because mobile browsers have a hard cache, you'll not be able to see the change immediately.

Posts: 11
Customer
Topic starter
(@ferdinand-rodriguez)
Member
Joined: 2 years ago

Sorry same thing happened.

The short code that appeared is as follows:

[wpd-giphy id='3o6gDPXMNxFhvHdcf6' subdomain='media2' width='480' height='261']

 

I see that the width is only 480 and the width of 600 still appears cropped.  Should I use a lower number?  Thanks!

Posts: 11
Customer
Topic starter
(@ferdinand-rodriguez)
Member
Joined: 2 years ago

By the way, I've tried changing the short code width to '320' and it worked.  However, I doubt my users will know to do this.  Is there a way to set it automatically?

Using the short code below and changing width to 320 did not work.

@media screen and (max-width: 320px){
     .wpdiscuz-giphy-embedded-gif-wrapper.wpdiscuz-giphy-full-gif {
         width: 100%;
     } 
}
1 Reply
Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 5956

@ferdinand-rodriguez,

Please let us know if the code is already added or you've removed it? 

Posts: 11
Customer
Topic starter
(@ferdinand-rodriguez)
Member
Joined: 2 years ago

I've removed it.  Now I've added it back as follows (your original css):

 

@media screen and (max-width: 600px){
     .wpdiscuz-giphy-embedded-gif-wrapper.wpdiscuz-giphy-full-gif {
         width: 100%;
     } 
}
2 Replies
Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 5956

@ferdinand-rodriguez,

Could you please add this one?

@media screen and (max-width: 600px){
   .wpdiscuz-giphy-embedded-gif-wrapper.wpdiscuz-giphy-full-gif {
       width: 100% !important;
   }
}
Customer
(@ferdinand-rodriguez)
Joined: 2 years ago

Member
Posts: 11

@astgh Genius!  it worked!  Thanks 🙂  You can mark this thread as resolved

Share:
Scroll to top