- This topic has 5 replies, 2 voices, and was last updated 8 years, 6 months ago by
.
Hi,
I am using your jevelin theme (Startup demo) for my website and as a first page I have a video background. The problem is that although the video is working perfectly in laptop when I access the website in mobile, it is completely disajusted of the screen (please see image attached) showing a grey background and appearing just a slice of the video on the left.
I would like to have your urgent support as the website is live at the moment.
Thanks.
Marcelo Silva
Marcelo Silva
Hi Marcelo Silva,
I hope you are well today and thank you for your question.
Could you please tell me how you have set video background?
Have you made any changes in the theme code?
Best regards,
Shufflehound teamHi!
No, I haven´t made changes in the theme code.
In the landing page I just put video background in the first section, please see image attached.
Thanks,
Marcelo Silva
You can resolve the issue by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#home #VideoWorker-0 { margin-left: 0 !important; }Hi,
Thanks for the feedback.
The video background is still not fitting the mobile screen as you can see in the image attached.
If not possible to have 100% fitted, how can I put an image background for mobile and a video background for laptop?
Thanks
Marcelo Silva
The video background is still not fitting the mobile screen as you can see in the image attached.
I can see it is fitting well in your shared screenshot. If you are referring its height then it can’t fit on mobile as there is constraint due to video aspect ratio.
If not possible to have 100% fitted, how can I put an image background for mobile and a video background for laptop?
You can achieve this using following custom CSS code.
@media (max-width: 800px) { #home #VideoWorker-0 { display:none; } .sh-section-accc22f04d32fce11ef4dfe63fa6bf51 { background-image: url(//www.3dtour.pt/wp-content/uploads/2017/05/Wallpaper.png) !important; background-position: 0 0; } }
