Professional WordPress Plugins and Services. wpDiscuz, WooDiscuz, Advanced Post Pagination
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!
Hi Ferdinand Rodriguez,
Please leave an example URL where we can see the issue.
@astgh Here’s the link: https://themislabeledspecimen.com/lab-questions/weirdest-specimen-containers/
Thank you
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.
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!
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%;
}
}
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%;
}
}
Could you please add this one?
@media screen and (max-width: 600px){
.wpdiscuz-giphy-embedded-gif-wrapper.wpdiscuz-giphy-full-gif {
width: 100% !important;
}
}
@astgh Genius! it worked! Thanks 🙂 You can mark this thread as resolved