ldybudd

Must have had a mistake in my earlier @media statements as having the following seems to have solved the mobile display. Now I just need to define position and I will have it where I want it. .lesson-video-wrapper {width:640px!important; height:360px!important; margin:5% 20%} @media only screen and (max-width:500px){ .lesson-video-wrapper { width:100%!important } }

My desktop users were complaining about the enormous full-width individual video size that displays when you click on a video in the video collection. I used this rough custom css to reduce the size: .lesson-video-wrapper {width:640px!important; height:360px!important; margin:5% 20%} and the page now looks like the screenshot attached (or visit the page here:https://relspec.com/video-library/v/powerful-ultrasonics-clean-blind-holes). However, this has now messed up how the video looks on a mobile phone. I tried to refine with some @media statements but then everything reverts to the original 100% width. Any suggestions?