- This topic has 11 replies, 2 voices, and was last updated 6 months, 3 weeks ago by
Leo.
-
AuthorPosts
-
February 25, 2020 at 12:57 pm #1176734
Robin
Hi!
Thanks for all that you do, I really love this theme!
I just have one small problem. When I embed an image or video from Instagram it shows up fine on the desktop, but not on mobile. The left side of the embed is fine, it lines up perfectly with the text and everything else, but on the right side the embed extends too far, it extends all the way to the edge of the screen. I don’t have this problem with YouTube or Twitter embeds. What can I do to fix it?
Thanks in advance!
RobinFebruary 25, 2020 at 3:47 pm #1176837Tom
Lead DeveloperLead DeveloperHi Robin,
Sounds like an issue with iframes, maybe. Any chance you can link us to the site?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 25, 2020 at 4:00 pm #1176851Robin
Sure! This is one of the articles on the site with two Instagram embeds: https://aretheyvegan.com/rihanna/
The article also contains YouTube and Twitter embeds, but they appear just fine.
February 25, 2020 at 4:26 pm #1176862Leo
StaffCustomer SupportCan you try adding this CSS?
iframe.instagram-media.instagram-media-rendered { width: auto !important; min-width: unset !important; }
Adding CSS: https://docs.generatepress.com/article/adding-css/
Make sure to clear your caching plugin and disable it for now if it doesn’t work.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 25, 2020 at 4:37 pm #1176870Robin
That didn’t work, unfortunately. I’ve disabled the caching plugin.
February 25, 2020 at 4:40 pm #1176872Leo
StaffCustomer SupportCan you try the edited code?
Make sure to disable Autopimize as well.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 25, 2020 at 4:51 pm #1176882Robin
We’re getting somewhere! It worked for one of the two embeds, but not the other. The one it worked for is an Instagram post from 2013, so probably a low resolution image, I don’t know if that’s relevant.
I’ve disabled Autoptimize as well.
February 25, 2020 at 5:01 pm #1176891Leo
StaffCustomer SupportEdited the code again:
https://generatepress.com/forums/topic/problem-with-instagram-embed-width-on-mobile/#post-1176862Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 25, 2020 at 5:05 pm #1176893Robin
It worked! Both are exactly as they should be now. Thank you so much!
February 25, 2020 at 5:05 pm #1176894Leo
StaffCustomer SupportGlad I could help π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 24, 2020 at 2:32 am #1456578Giordano
works
September 24, 2020 at 8:27 am #1457210Leo
StaffCustomer SupportGlad to hear π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.