My Website All Page Header is Not Showing in Mobile View. Please help Me .

Hey @rajzcost ,

The video does not appear on mobile devices because in the parent element of the <video> you have a <div> in this we have the following class elementor-hidden-phone.

Upon checking what happens when the screen size reduces below 768px, cause that’s when the video does not show up i found the following CSS. frontend.css line no. 1975

@media (max-width: 767px) {
    :is(.e-con,.e-con>.e-con-inner)>.elementor-background-video-container.elementor-hidden-phone {
        display: none;
    }
}

Due to this CSS you are not able to see the video on mobile devices. You can remove the class elementor-hidden-phone and clean up the above CSS code to show your video in all devices

Thank you hope it helps. LMK if you need more guidance.


EDIT: Saw similar declaration in line number 2664 as well. Please clean up this as well.

• This reply was modified 1 month ago by Eshaan Dabasiya.

Thanks For Your Solutions @im3dabasia1

I Have Try to Find this Code in Theme > Style.css File

But I did Not get This Code to remove. Please Check Screenshot of File. If I am Wrong way Then Please Guide me to right way to remove this Code from CSS file .

https://we.tl/t-fK3IEJLKUp

Hey @rajzcost ,

In the frontend this file is in Link Name: frontend.min.css?ver=3.25.4. So check for a CSS file with this name ideally should be frontend.css in the assets/css folder in your setup. Currently the minified version is served because you’d be having webpack configured. This CSS file will be in the assets folder for sure. So dig up here and you’d find the class. If you are using VS Code or some code editor you can do a global search too this will help in finding the Class.

Attaching A video to show that it works if you remove the class: elementor-hidden-phone from HTML and CSS
Attaching video link demo: link.

Thank you . LMK if you need any more assistance

Hello @im3dabasia1

Thanks for Your Support. As per Your Instruction I have Remove This Code. From frontend.css But Still Same Issu. Please Check Again from Your side That I have done right way or Wrong Way.

@rajzcost , The code does show up in frontend.min.css , Remove this classes from here. And also remove the class from HTML markup

For reference: Remove the class which is div element above the <video> element remove the . Clean up this as well by removing elementor-hidden-phone class as well. Deploy the changes and then lets see if it works or not.

• This reply was modified 3 weeks, 3 days ago by Eshaan Dabasiya.

Hello @im3dabasia1

Thanks for Your Kind Support. I have Deleted Code After That Same Thing Not Open in Mobile but One Thing is Change Its Open in Chrome Impact Mode Mobile View. Can you Please Check Again Its Done in Right way or Not ?

Hey @rajzcost , Sorry for the delay was caught up in some tasks.

Great now the CSS issue is fixed as you have added custom CSS to override your previous CSS. by adding display : Flex , Please correct this to display : flex

Now coming to the issue, Since it is working in the desktop, now mobile too but only in chrome dev tools. (This too only when we initially start with desktop layout then resize to mobile). If we refresh the tab when it is in mobile layout then you’d notice that the video doesn’t appear. Why? Because it started on small width from the start itself. As it would in a real smart phone.

Well Upon Debuging I found that the player appears on the website for sizes >= 768px It appears the way we want to, this solves one of the problem we have solved the bug for tablet devices grater than 767px.

I don’t think this is a CSS issue anymore, and feel it is a JavaScript issue. I checked the frontend.min.js files frontend.min.js. Here I suspect that you have added some logic that if the device width is less than 768px, then you are manipulating whether or not the video should be visible or not. You can search for words/phrases like 769, innerWidth, This will help you closer to the problem why the player is not showing up in small devices.

LMK If this helps. Waiting for your reply.

Hy @im3dabasia1

Thanks for kind Replay. I don’t Have Idea in Java Script. This is Downloaded WordPress theme. So may be this Java Code is Including There. So Can You Guide me Where and What Code Should I Change in frontend.min.js. File. And One more thing this is not About Only Video. In About Us page and Services and other Page There is only Image That Image Also not Visible in Mobile and In Desktop Its Visible As Wel As fine. I Think This Issue is Not about the Video Only This About header.

Thanks For Your Support in advance.

Hey @rajzcost , In line Number 679, The current logic is this:

(e.background_play_on_mobile || "mobile" !== elementorFrontend.getCurrentDeviceMode()) && ("video" === e.background_background && e.background_video_link ? this.activate() : this.deactivate());

You can try this, since we want the video to be played in all devices, it doesnt make sense for the mobile conditional checks so your final code should be this:

("video" === e.background_background && e.background_video_link) ? this.activate() : this.deactivate();

Try this in your local and let me know if it works? frontend.min.js. This is the file you have to make the change.

Hy @im3dabasia1

Thanks for Your replay. I have Changed as per your Guide. But Still Not working.