Some issues with mobile devices  

  RSS

TimHeidinger
(@timheidinger)
Member Customer
Joined: 2 months ago
Posts: 7
03/01/2019 9:12 pm  

Hi! Some problems with mobile view.

  • YouTube: Missing section of the thumbnail on the right side
  • SoundCloud: Out of box on right site
  • Instagram: Out of box on right site

 

Forums: https://spieleoase.net/community/sonstiges/neue-embed-plugin/

 

Thanks. Best regards, Tim

 

 


ReplyQuote
TimHeidinger
(@timheidinger)
Member Customer
Joined: 2 months ago
Posts: 7
03/01/2019 9:13 pm  

My settings: 


ReplyQuote
Tom
 Tom
(@tomson)
Support Team Admin
Joined: 4 years ago
Posts: 2874
04/01/2019 10:27 am  

Hi @timheidinger,

Use this CSS code to fix these issues. Put this code in Dashboard > Forums > Settings > Styles Tab > Custom CSS Code textarea. Save it, delete all caches, navigate on forum front-end and press Ctrl+F5 to reset browser cache:

#wpforo-wrap .wpforo-post-content iframe{
   width: 100%!important;
}
#wpforo-wrap .wpforo-post-content .wpf-video{
   width: 100%!important; height: auto!important;
}
#wpforo-wrap .wpforo-post-content .wpf-video iframe{
   width: 100%!important; height: 30vw!important;
}

TimHeidinger liked
ReplyQuote
TimHeidinger
(@timheidinger)
Member Customer
Joined: 2 months ago
Posts: 7
04/01/2019 8:50 pm  

Thanks! This solution has solved most of the problems.

However the instagram error persists:


ReplyQuote
Tom
 Tom
(@tomson)
Support Team Admin
Joined: 4 years ago
Posts: 2874
05/01/2019 9:44 am  

For the Instagram add this CSS code, and don't forget deleting all caches and pressing Ctrl+F5 on forum front-end:

#wpforo-wrap .wpforo-post-content iframe.instagram-media {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}

ReplyQuote
TimHeidinger
(@timheidinger)
Member Customer
Joined: 2 months ago
Posts: 7
31/01/2019 7:00 am  

Hi! The tweet area is now fully responsive. However I still have some trouble with YouTube embeds. The video box is not fully responsive.

Desktop window (everything looks fine):

Smaller (looks not good)

Very small (only twitter looks still nice)

 

Used CSS:

/* Embed Plugin */
#wpforo-wrap .wpforo-post-content iframe{
width: 87%!important;
}
#wpforo-wrap .wpforo-post-content .wpf-video{
width: 87%!important;
height: auto!important;
}
#wpforo-wrap .wpforo-post-content .wpf-video iframe{
width: 87%!important;
height: 20vw!important;
}
#wpforo-wrap .wpforo-post-content iframe.instagram-media {
width: 87% !important;
max-width: 87% !important;
min-width: 87% !important;
}

 

Forums:  https://spieleoase.net/community/sonstiges/neue-embed-plugin/

 

 

Best regards, Tim

This post was modified 3 weeks ago by TimHeidinger

ReplyQuote
TimHeidinger
(@timheidinger)
Member Customer
Joined: 2 months ago
Posts: 7
01/02/2019 6:49 pm  

I dont know how to fix this issue with youtube embeds...


ReplyQuote
Astghik
(@astghik)
Support Team Admin
Joined: 1 year ago
Posts: 1729
04/02/2019 1:31 pm  

Hi @timheidinger,

Sorry for the delay. Please use this code. It should solve the issue:

@media screen and (max-width: 800px) {
#wpforo-wrap .wpforo-post-content .wpf-video > iframe {
height: auto !important;
width: 100% !important;
}
}

ReplyQuote
TimHeidinger
(@timheidinger)
Member Customer
Joined: 2 months ago
Posts: 7
04/02/2019 9:33 pm  

I think the embeds are not centered.

My current CSS:

/* Embed Plugin */
#wpforo-wrap .wpforo-post-content iframe{
width: 87%!important;
}
#wpforo-wrap .wpforo-post-content .wpf-video{
width: 87%!important;
height: auto!important;
}
#wpforo-wrap .wpforo-post-content .wpf-video iframe{
width: 87%!important;
/*height: 20vw!important;*/
height: 28em!important;
}
#wpforo-wrap .wpforo-post-content iframe.instagram-media {
width: 87% !important;
max-width: 87% !important;
min-width: 87% !important;
}
@media screen and (max-width: 800px) {
#wpforo-wrap .wpforo-post-content .wpf-video > iframe {
height: auto !important;
width: 100% !important;
}
}


ReplyQuote
Share: